vue登录权限控制-路由守卫

//NProgress进度条样式，import引入
//import NProgress from 'nprogress'
//import 'nprogress/nprogress.css'
// NProgress Configuration 是否有转圈效果
//NProgress.configure({ showSpinner: false })  

const AUTH_WHITE_LIST = ['/login', '/401']   //白名单路由
// 路由处理--登录验证
router.beforeEach(async(to, from, next) => {
  // 开始进度条
  NProgress.start()

  // 设置页面标题
  if (to.matched.length !== 0) {
    document.title = '页面标题' + (to.meta.title === undefined ? '' : ' - ' + to.meta.title)
  }
  // 判断是否登录时，因为页面刷新后内存中还没有token信息，额外从session中判断一次
  if (!AuthUtils.isLogin()) {
    const sessionStore = SessionStorageUtils.getStore()
    store.replaceState(Object.assign({}, store.state, sessionStore))
  }

  if (AuthUtils.isLogin()) {
    // 已经登录的，不能跳到登陆页面，跳到首页
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      if (to.matched.length === 0) { // to.matched.length代表是否匹配到当前要跳转的路由
        next('/404')// 未知页面调错误页
        NProgress.done()
      } else if (to.meta && !AuthUtils.hasAuth(to.meta.auth)) { // 需要验证当前路由否有权限，没有跳404，有就继续走
        next('/404')// 无权限跳404
        NProgress.done()
      } else {
        next()
        NProgress.done()
      }
    }
  } else {
    if (AUTH_WHITE_LIST.indexOf(to.path) !== -1) {  //在白名单中就继续正常走
      next()
    } else if (to.matched.length === 0) {
      next('/401')// 未知页面调错误也
    } else {
      // 没有登陆，不在白名单里，重定向到登陆页
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

router.afterEach(() => {   //跳转完成，进度条结束
  // 完成进度条
  NProgress.done()
})

关键字解释：

to.match---》to.matched数组，该数组中保存着匹配到的所有路由信息-------->用to.matched而不直接用to.meta 是因为前者只需要给较高一级的路由添加Auth(权限)即可，其下的所有子路由不必添加。
replaceState---》修改了对应的store历史记录,更新store

Object.assign()

Object.assign()----》将所有可枚举属性的值从一个或多个源对象复制到目标对象,然后返回目标对象
Object.assign()---》是ES6新添加的接口，主要的用途是用来合并多个JavaScript的对象。
Object.assign()-----》接口可以接收多个参数，第一个参数是目标对象，后面的都是源对象，assign方法将多个原对象的属性和方法都合并到了目标对象上面，如果在这个过程中出现同名的属性（方法），后合并的属性（方法）会覆盖之前的同名属性（方法）。

vue登录权限控制-路由守卫

关键字解释：

猜你喜欢