虽互不曾谋面,但希望能和您成为笔尖下的朋友
以读书,技术,生活为主,偶尔撒点鸡汤
不作,不敷衍,意在真诚吐露,用心分享
点击左上方,可关注本刊
标星公众号(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') =&#