需求 : 未登录的情况下, 如何处理访问了其他页面 (home / users 等等)
问题 1 : 如何判断登录了还是没有登录?
- 如果登录成功了, 后台会返回给我们一个 token 令牌
- 保存到本地
- 从本地获取 token 令牌, 如果能获取到, 则登录了, 如果获取不到, 则未登录
// 保存 localStorage.setItem('token', res.data.data.token) // 获取 localStorage.getItem('token')
问题 2 : 如果未登录, 访问了其他页面,该怎么处理???
-
判断到底登录了还是没有登录 (问题 1 localStorage.getItem('token'))
-
login ? home ? users ? (手动)
-
全局前置导航守卫 (to, from , next) - 登录拦截
-
处理的具体步骤 (重要)
- 判断是否是 login 页面 => 直接访问
- 不是登录页面 => 再次判断
- 判断是否登录 => 登录了 => 访问
=> 未登录 => 跳转 login
- 清除 token
- 提示退出成功
- 跳转到首页
创建三个组件,并且显示出来左侧栏导航菜单的路由
el-menu 有个属性 router 默认是'false', 开启 vue-router 路由模式 => true
:router='true'
index 的值 作为 path 进行路由跳转
index='/users' , '/roles', '/rights'
- 创建组件 users/Users.vue
- 走流程
- 入口 - 规则 - 组件 - 出口
- 需求 :users、roles、rights 三个对应的组件显示在 home 组件里, 而不应该直接把 home 给替换掉
- 嵌套路由(子路由)
- home 组件里 main 位置留一个出口
- 设置子路由 children : [ 三个路由规则]
{ path: '/home', name: 'home', component: Home, children: [ { path: '/users', name: 'users', component: Users }, { path: '/roles', name: 'roles', component: Roles }, { path: '/rights', name: 'rights', component: Rights } ] }用户列表
参考 : 表格组件
- element-ui 官网 把 结构 + 数据 拷贝过来
- 分析
- 改造
- 请求数据
- 要添加 token
- http 无状态的 , 上一次登录后的结果, 后台是不记录的,
- 每次发送请求都要携带这个 token, 因为这个 token 是后台返回给我们的, 再携带 token 过去, 后台是知道的, 于是就可以 返回 正确的数据了
// 引入 axios import axios from 'axios' // 请求 // 格式 : axios.get(url地址, config) // { // params : { query : '', pagenum:1, pagesize:2 }, // headers : { Authorization: localStorage.getItem("token") } // } axios .get('..../users', { params: {}, headers: {} }) .then(res => {})用户列表 -分页
- 展示分页
<el-pagination background layout="prev, pager, next" :current-page="pagenum" :page-size="2" :total="total" ></el-pagination>
- 点击分页
<el-pagination @current-change="clickCurrentPage"> clickCurrentPage(curPage) { this.loadUsersData(curPage) } loadUsersData( pagenum = 1) {}</el-pagination >
- 查询内容
<el-input v-model='queryText' /> - 点击按钮查询内容 this.loaduserData(1, this.queryText) - 点击分页 this.loadUsersData(curPage, this.queryText) - 查询数据 loadUsersData(pagenum= 1, query='') {}面包屑 lang + 处理 less
- lang='css/less'
- 安装 less-loader npm i less-loader less -D
- webpack 配置好了, 我们只需要把需要安装的包安装一下即可
template => Users.html
script => Users.js
style => Users.less
<template src="./Users.html"></template> <script src="./Users.js"></script> <style src="./Users.less" lang="less" scoped></style>表格的列分为两种
正常列 : 直接赋值 prop='username'
自定义列 : 组件/需要处理数据之后才能 赋值的
<!-- 自定义列不在使用prop赋值,找table表格组件的自定义列,规律:每个表格组件用<template slot-scope="scope"></template>包裹,slot-scope是作用域插槽 --> <template slot-scope="scope"> <el-switch v-model="state"> </el-switch> </template> ``