434 vue day10

登录问题

需求 : 未登录的情况下, 如何处理访问了其他页面 (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) - 登录拦截

• 处理的具体步骤 (重要)

1. 判断是否是 login 页面 => 直接访问
2. 不是登录页面 => 再次判断
3. 判断是否登录 => 登录了 => 访问
   => 未登录 => 跳转 login

退出登录

1. 清除 token
2. 提示退出成功
3. 跳转到首页

左侧栏

左侧栏导航菜单的路由
el-menu 有个属性 router 默认是'false', 开启 vue-router 路由模式 => true
:router='true'
index 的值 作为 path 进行路由跳转
index='/users' , '/roles', '/rights'

创建三个组件，并且显示出来

1. 创建组件 users/Users.vue
2. 走流程

• 入口 - 规则 - 组件 - 出口

3. 需求 :users、roles、rights 三个对应的组件显示在 home 组件里, 而不应该直接把 home 给替换掉
4. 嵌套路由(子路由)

• 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 }
     ]
   }

用户列表

参考 : 表格组件

1. element-ui 官网 把 结构 + 数据 拷贝过来
2. 分析
3. 改造
4. 请求数据

• 要添加 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>
``