vue token 过期处理

1.登陆成功后储存token  可以利用 vuex 储存token 

2.利用路由守卫处理

 

router.beforeEach((to, from, next) => {

 

}）

 

 

3.我们可以判断进去的路由的名字是不是 login  如果没有token  或者 跳转的路径不是登陆页面 就跳转到登陆页面

如果有token &&  跳转的是登陆页面 ，就跳转到主页面

 

 

  if (!token && to.name !== LOGIN_PAGE_NAME) {
    // 未登录且要跳转的页面不是登录页
    next({
      name: LOGIN_PAGE_NAME // 跳转到登录页
    })
  } else if (!token && to.name === LOGIN_PAGE_NAME) {
    // 未登陆且要跳转的页面是登录页
    next() // 跳转
  } else if (token && to.name === LOGIN_PAGE_NAME) {
    // 已登录且要跳转的页面是登录页
    next({
      name: homeName // 跳转到homeName页
    })
  } else {
    if (store.state.user.hasGetInfo) {
      turnTo(to, store.state.user.access, next)
    } else {
      store.dispatch('getUserInfo').then(user => {
        console.log(token);
        // 拉取用户信息，通过用户权限和跳转的页面的name来判断是否有权限访问;access必须是一个数组，如：['super_admin'] ['super_admin', 'admin']
        turnTo(to, user.access, next)
      }).catch(() => {
        setToken('');
        next({
          name: 'login'
        })
      })
    }
  }