利用路由守卫实现token访问拦截

需求：在项目中，我们经常会遇到对路径访问的拦截，如：未登录时，只允许访问登录和404页面，在登录后，不允许直接通过url访问登录页面等。本文章将对该需求做简单介绍。

一、实现思路

添加全局路由守卫，判断当前页面是否有token，如果有，则可以访问首页等页面，但不能访问登录页面，访问登录页面时，需重定向至首页；如果没有token，则可以访问包含登录页面在内的白名单列表页面，不可访问其他页面，访问其他页面则要重定向至登录页面。

二、实现举例

        1、新建utils/permission.js页面，具体内容如下：

import router from '@/router'
import store from '@/store'

// 设置未登录可以访问页面的白名单
const whiteList = ['/login', '/404']

// 设置路由守卫
router.beforeEach((to, from, next) => {
  // to：跳转的路由对象
  // from：从哪里来
  // next：放行next() 重定向next(路径)
  const token = store.state.user.token
  if (token) {
    // 如果有token
    if (to.path === '/login') {
      // 如果有token，且访问登录页面，则跳转至首页
      next('/')
    } else {
      // 有token，访问其他路径，直接放行
      next()
    }
  } else {
    if (whiteList.includes(to.path)) {
      // 没有token，访问白名单，直接放行
      next()
    } else {
      // 没有token，访问其他页面，跳转登录
      next('/login')
    }
  }
})

        2、在main.js中，导入permission.js，设置全局路由守卫

// 导入路由守卫
import '@/utils/permission'