vue-router beforeEach在实际项目中的应用

910 阅读1分钟

vue-router beforeEach 钩子函数可以在验证用户登录场景中使用,下面是具体代码

import router from './router'
import { getToken } from '@/utils/auth' // 获取token
const whiteList = ['/login'] //设置白名单 
router.beforeEach(async(to, from, next) => {
// 获取token
const hasToken = getToken()
  if (hasToken) {//token为真时
   next()
  }else{//token不存在
   if (whiteList.indexOf(to.path) !== -1) {
      //在免登录白名单直接进入
      next()
    } else {
      // 其他没有访问权限的页面将被重定向到登录页面
      next(`/login?redirect=${to.path}`)
    }
  }
}
)
)