vue路由跳转权限拦截判断

全局钩子函数：

Vue.beforeEach(function(to,form,next){})     /*在跳转之前执行*/
Vue.afterEach(function(to,form))     /*在跳转之后判断*/
           

参数说明：

to：router即将进入的路由对象

from：当前导航即将离开的路由

next：Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。

afterEach函数不用传next( )函数。

路由函数：

const router = new VueRouter({
  routes: [ {
      path: '/login',
      component: Login,
      beforeEnter: (to, from, next) => {
        // ...
      },
      beforeLeave: (to, from, next) => {
        // ...
      }
    }
  ]
})
           

不同角色的进入显示不同的页面

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Home from '@/components/Home'
Vue.use(Router)

let routerMap = [
  {
    path: '/',
    redirect:'/login',
    component: Login,
  },
  {
    path:'/admin',
    name:'admin',
    component: admin,
    meta: {
      requireAuth: true, // 表示进入这个路由是需要登录的
      type: ['admin'] // 表示只有管理员才能进入当前页面
    },
  },
   {
    path:'/user',
    name:'user',
    component: user,
    meta: {
      requireAuth: true, // 表示进入这个路由是需要登录的
      type: ['user'] // 表示只有用户才能进入当前页面
    },
  },
   {
    path:'/public',
    name:'public',
    component: public,
   meta: {
      requireAuth: true, // 表示进入这个路由是需要登录的
      type: ['user','admin'] // 表示用户和管理员都可以进入当前页面
    },
  },
 ]

let route =  new Router({
  routes: routerMap
})

router.beforeEach((to, from, next) => {
   // 判断该路由是否需要登录权限
  if (to.matched.some(record => record.meta.requireAuth)) {
    // 判断当前的user是否登录
    let login = router.app.$options.store.state.publics.userislogin
    if (login === 1) {
      let adminType = router.app.$options.store.state.publics.adminType
      // 判断当前登录类型
      console.log(to.matched.some(record => record.meta.type.indexOf(adminType) > -1))
      if (to.matched.some(record => record.meta.type.indexOf(adminType) > -1)) {
        next()
      }
    } else {
      next({
        path: '/'
      })
    }
  } else {
    next()
  }
})

export default route;