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

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

前言

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

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

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

01

全局前置守卫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') =