vuejs中的路由全局前置守卫-全局后置路由守卫及独享路由守卫-组件内的守卫

前言

对于前端路由守卫,只要做过后台权限管理系统的前端,多少都会接触到,本质上就是为了保护访问路由的访问权限,也就是对路由权限进行控制

只有在允许特定的情况下才能访问某个固定的路由,具备查看某些页面的权限,比如:未登录系统之前,禁止直接访问用户个人中心等

主子账户的权限设置等,路由守卫是一个非常重要的知识点,一起来学习一下的

全局前置守卫beforeEach

全局前置守卫,初始化时执行,每次路由切换前执行,如下代码所示

const router = new VueRouter({ ... })
// 在导出路由实话对象之前进行拦截使用
router.beforeEach((to, from, next) => {
  // 具体的逻辑
  // to:即将要进入的路由
  // from: 从哪个路由来的即当前导航正要离开的路由
  // next: 放行,进行管道中的下一个钩子  
})

export default router;

一般我们在切换路由之前,可以根据后台返回的一些字段,信息进行逻辑判断,从而控制路由的跳转

import Vue from 'Vue';
import VueRouter from 'vue-router';
// 使用路由插件
Vue.use(VueRouter);
const router = new VueRouter({...})
// 全局前置路由
router.beforeEach((to,from,next) => {
  if(to.path === 'html' || to.path === '/fontend/javaScript' || to.path === '/fontend/css' ) {
    if(localStorage.getItem('role') === 'admin') {
      next();
    }else {
      alert("无权限查看");
    }
  }else {
    next();
  }
})

export default router

如果不使用path进行比较,使用name比较,也是可以的,如下代码所示

router.beforeEach((to,from,next) => {
  if(to.name === 'Html' || to.name == 'JavaScript' || to.name==='Css') {
    if(localStorage.getItem('role') === 'admin') {
          next();
    }else {
          alert("无权限查看");
    }
  }else {
    next();
  }
})

上面的依旧比较复杂,我们往往为了方便,一般都是在路由的元信息meta里面添加一个字段标识,来对我们的路由进行访问权限的控制 如下所示

const router = new VueRouter({
  routes: [
    {
      path: '/fontend/html',
      name: 'Html',
      component: () => import("@/videws/fontend/html"),
      meta: {
        isAuthenticated: true  // 表示需要有权限的控制
      }
    },

    {
      path: '/fontend/javaScript',
      name: 'JavaScript',
      component: () => import("@/videws/fontend/javaScript"),
      meta: {
        isAuthenticated: true  // 表示需要有权限的控制
      }
    },

    {
      path: '/fontend/css',
      name: 'Css',
      component: () => import("@/videws/fontend/css"),
      meta: {
        isAuthenticated: true  // 表示需要有权限的控制
      }
    }
  ]
})

router.beforeEach((to,from,next) => {
  // 这里就直接可以通过访问meta下的isAuthenticated
  // 判断当前路由是否需要进行权限控制
  if(to.meta.isAuthenticated) {
    if(localStorage.getItem('role') === 'admin') {
          next();
    }else {
          alert("无权限查看");
    }
  }else {
    next();
  }
})

export default router;

这个next()是放行的意思,可以指定到具体的哪个路由,就是确认下一步操作

next('/')或next({path:'/'})

可以向next传递进去任意的位置对象