一、情景说明

我们访问任何一个互联网系统，如淘宝、CSDN等，都会遇到按钮权限的情况。
那么，如何在Vue项目中实现按钮权限控制了？

这里就用到了路由守卫技术
它可以类比于SpringBoot项目中的拦截器。
在拦截器里做的权限控制。

这一篇，主要讲解全局前置守卫
在路由组件切换时，都会触发这个全局前置守卫

二、案例

1、给路由配置添加meta元数据，用于判断是否需要权限管理
关键配置：meta

 const router = new VueRouter({routes:[{name:'guanyu',path:'/about',component:About,meta:{title:'关于'}},{name:'zhuye',path:'/home',component:Home,meta:{title:'主页'},children:[{name:'xinwen',path:'news',component:News,meta:{isAuth:true,title:'新闻'}},{name:'xiaoxi',path:'message',component:Message,meta:{isAuth:true,title:'消息'},children:[{name:'xiangqing',// path:'detail/:id/:title',path:'detail',component:Detail,meta:{isAuth:true,title:'详情'},// props:{a:1,b:'hello'}// props:trueprops($route){return {id:$route.query.id,title:$route.query.title,a:1,b:'hello'}}}]}]}]
});

2、添加全局前置路由守卫
初始化的时候被调用、每次路由切换之前被调用

router.beforeEach((to,from,next)=>{console.log('前置路由守卫',to,from);if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem('school') ==='china'){next()}else{alert('学校名不对，无权限查看！')}}else{next()}
});

三、补充

(to,from,next)的参数说明
to：是即将要跳转去的路由组件（终点）
from：是从哪个路由组件跳过来的（起点）
next：如果鉴权通过，则放行（可以正常访问）