token权限控制用户合法登陆页面操作

1、网站一般只要登陆过一次后，接下来该网站的其他页面都是可以直接访问的，不用再次登陆。我们可以通过 token 或 cookie 来实现。（token权限控制(在用户访问路由前，确认该访问用户是否进行过登陆操作，禁止通过路由直接非法进入页面访问)）

2、全局前置守卫在路由刚开始导航且还未进入路由对应的组件中时触发，简单来说即最早触发，但是触发时候没有任何组件等加载，正因为如此适合做登陆判断逻辑。当一个导航触发时，全局前置守卫按照创建顺序调用，守卫是异步解析执行，此时导航在所有守卫resolve完之前一直处于等待中。

点击查看代码

// 配置好的路由
import router from './index'
// 本地存储插件
import storejs from 'storejs'
	
//全局前置守卫
router.beforeEach((to, from, next) => {
  const token = storejs('token')
  // 先判断本地是否存储过token
  if (token) {
    // 如果有token，则当前用户要访问的路由是否是登陆页面
    if (to.name === 'login') {
      // 如果是登陆页面则直接免登录跳转到主页
      next('/home')
    } else {
      // 如果不是登陆页面，放行通过直接访问
      next()
    }
  } else {
    // 如果本地没有token， 则判断当前用户是否访问登陆页面
    if (to.name === 'login') {
      // 如果是登陆页面，则放行让用户到登陆页面进行登录操作
      next()
    } else {
      // 如果直接访问主页面时进行拦截回退到登陆页面
      next('/login')
    }
  }
})

需注意：在全局前置守卫内是不能访问到this的

3、在响应拦截器内做处理，如果返回的状态码为401，表示当前登陆用户无权限访问，即回退到登录页面，并且清空本地的token存储

点击查看代码

// 响应拦截器
service.interceptors.response.use(response => response, (error) => {
  if (error.response.status === 401) {
    storejs.remove('token');
    router.replace('/login');
  }
});