导航守卫

导航:表示路由正在发生改变,利用导航守卫控制导航跳转

  • 前置守卫:beforeEach((to, from, next) => {})
  • 后置守卫:afterEach((to, from) => {})
  • 全局解析守卫(beforeResolve)

  • 路由独享守卫(beforeEnter)

  • 组件内守卫(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)

// import router from './router'
import store from './store'
import {getToken} from './utils/auth'   //getToken from cookie

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const router = new Router({
  routes: constantRouterMap
})

router.beforeEach((to, from, next) => {
  console.log(to, from);

  // determine if there has token
  if( getToken() ){
    // has token
    if( to.path === '/login' ){
      next()
    }else {
      // 判断当前用户是否已拉取完user_info信息
      if( store.getters.roles.length === 0 ){
        store.dispatch('GetUserInfo').then(() => { // 拉取user_info
          /**
           * roles: [
           *      internalUser            普通用户(内部用户)
           *      administrator           超级管理员(内部用户)
           *      lawfirmUser             律所用户
           *      notarialOfficeUser      公证处用户
           * ]
           */
          const roles = store.getters.roles

          // 根据roles权限生成可访问的路由表
          store.dispatch('GenerateRoutes', { roles }).then(() => { 
            // 动态添加可访问路由表
            router.addRoutes(store.getters.addRouters) 
            //hack方法 确保addRoutes已完成
            //set the replace: true so the navigation will not leave a history record
            next({ ...to, replace: true }) 
          })
          // }).catch((err) => {
          // store.dispatch('FedLogOut').then(() => {
          //    // Message.error(err || 'Verification failed, please login again')
          //     next({ path: '/' })
          // })
        })
      } else {
        next()
      }
    }
  }else {
    // has no token
    if( to.path === '/login' ){
      next()
    }else {
      next(`/login?redirect=${to.path}`)
    }
  }
})
beforeEach主要有3个参数to,from,next:
to:route即将进入的目标路由对象,
from:route当前导航正要离开的路由
next:function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

to: {
    name: "user"
    meta: {__ob__: Observer}
    path: "/user"
    hash: ""
    query: {}
    params: {}
    fullPath: "/user"
    matched: (2) [{…}, {…}]
    redirectedFrom: "/"
    __proto__: Object
}

from: {
    name: null
    meta: {}
    path: "/"
    hash: ""
    query: {}
    params: {}
    fullPath: "/"
    matched: []
    __proto__: Object
}

results matching ""

    No results matching ""