一、登录鉴权

1.创建一个登录后跳转的页面layout

（1）创建好了，在路由配置中添加，路径为’/‘

（2）在action中，使用router进行路由跳转

a.引入router.js中导出的router实例

2.登录鉴权方案

使用vue-router的全局路由前置守卫来把关每次路由跳转，创建permission.js文件，写入路由守卫规则

（1）用户未登录前，不允许进入非登录页面

（2）登录后，token未过期前，不允许进入登录页面
  1. import router from '@/router'
  2. // import { getItem } from '@/utils/storage' 不用从本地获取，直接从vuex中拿
  3. import store from '@/store'
  5. const whiteList = ['/login', '/404', '401']
  6. router.beforeEach((to, from, next) => {
  7.   /**
  8.    * 如果用户没有登录，跳转到login页面
  9.    * 如果用户登录后，判断token是否过期；如果过期，进图login页面，如果没有过期，判断to是否为login页面，是的话，进行提示
  10.    */
  11.   //   let token = getItem('token')
  12.   console.log(store.getters.token, 'store.getters.token')
  13.   const hasLogin = store.getters.token
  14.   if (!hasLogin) {
  15.     // 如果没有登录，只能进入白名单页面，否则调整到登录页面
  16.     if (whiteList.includes(to.path)) {
  17.       next()
  18.     } else {
  19.       next('login')
  20.     }
  21.   } else {
  22.     // 如果登录了，不能进入登录页，要访问登录页时进入首页
  23.     if (to.path === '/login') {
  24.       next('/')
  25.     } else {
  26.       next()
  27.     }
  28.   }
  29. })

a.判断是否登录，直接从vuex的getters中获取token(定义getter对象，添加token属性，值为一个函数，接受state对象为参数)
  1. // 快速访问
  2. const getters = {
  3.   token: (state) => state.user.token
  4. }
  5. export default getters

b.未登录可以进入白名单页面

创建一个数组来管理白名单页面，可以快速判断