Vue利用token + 路由守卫防止手拼地址跳转页面

我们在做项目时，通常是把token拼到header里，请求接口后，后台拦截器来判断token返回给前台状态，前台根据状态来判断是否token失效然后打回登录页。

这么做会有一个问题，就是如果说用户记住路由地址，会复制链接的方式同样进入页面（只是没有数据），我们这回利用路由守卫来防止这种情况

首先新建一个js文件

然后在main.js中引入（注意新建的js文件和main的层级，不一定非得像我这么加，能引入就可以）

import './permission' // permission control

 然后创建守卫

import router from './router'

const whiteList = ['/'] // no redirect whitelist

router.beforeEach(async(to, from, next) => {
  // start progress bar
  NProgress.start()
  // 获取token
  const hasToken = getToken()
  // 判断是否有token
  if (hasToken) {
    // 个人业务，获取当前角色
    const hasGetUserInfo = store.getters.roles && store.getters.roles.length > 0
    // 有跳转
    if (hasGetUserInfo) {
      next()
    } else {
      // next()
      var str = 'admin'
      store.state.user.roles = ['admin']
      const accessRoutes = await store.dispatch('permission/generateRoutes', str)
      router.addRoutes(accessRoutes)
      next({ ...to })
      NProgress.done()
    }
  } else {
    // 判断路由白名单
    if (whiteList.indexOf(to.path) !== -1) { // 进行遍历如果要去往的路由在白名单内
      next() // 就允许直接跳转
    } else { // 否则，说明要去往的路由不在白名单内而且用户也没登录
      next({
        path: '/'
      })
      NProgress.done() // 结束了，bor
    }
  }
})

router.afterEach(() => {
  // finish progress bar
  NProgress.done()
})

这里面有挺多是我个人业务的东西，比如NProgress，roles什么的，删掉就可以，重点的地方都加了注释。。whiteList是白名单，把自己不想拦截的页面路由加进去（初始页面 ‘/’ 一定要加，要不会陷入死循环）

我的getToken方法是自己封的取store里面的token状态，自己能取到自己的token就行

这么加完，我们未登录的情况下，无论你怎么手拼地址，都跳不过去了，退出登录的时候清空自己token缓存就可以了