在项目中最为常见的就是权限的分配与管理，权限管理可以由前端控制和后端控制，我们今天着重讲一下前端的权限管理，今天我们就用Vue来实现权限管理，由于需要配合Vue-Router进行使用，也被成为路由鉴权
鉴权的使用场景
鉴权一般是指需要权限才能访问的页面(页面鉴权)和需要权限才能点击的按钮(功能鉴权)
页面鉴权
我们常见的就是登录鉴权的操作，有些页面只能登录以后才可以进行访问，也可以结合后端实现RABC的鉴权操作,我们这里就以登录为例
页面鉴权实现思路
我们在跳转页面之前，先判断是否登录,未登录只能访问不需要登录权限的页面,如果访问需要登录的页面则全部重定向到登录页面，让用户进行登录之后在跳转访问到刚刚需要权限的页面
页面鉴权流程
我们可以通过流程图的方式，讲解如何进行登录鉴权的成操作
前端判断当前页面都有哪些权限的方式有俩种，第一种是通过路由元信息的方式实现，第二种是通过设置一个白名单的方式进行实现，我们这里就把这俩种都讲解一下
路由元信息权限鉴别方案
通过在路由对象中的meta属性中定义一个requireAuth一个布尔值为true,表示需要登录的权限
//vue-router的index.js文件 import Router from 'vue-router' const routes = [ { path: '/', name: 'home', component: ()=>import('@/views/Home') }, { path:'/login', name:'login', component:()=>import('@/views/Login') }, { path:'/blog', name:'blog', component:()=>import('@/views/Blog'), meta:{ //需要登录的权限 requireAuth:true } }, { path:'/notes', name:'notes', component:()=>import('@/views/Notes'), meta:{ //需要登录的权限 requireAuth:true } } ] export default new Router({ mode: 'hash', scrollBehavior: () => ({ y: 0 }), routes: constantRouterMap })
然后通过路由前置守卫进行拦截,使用路由前置守卫的原因在于需要在页面跳转前进行鉴权
//vue-router的index.js文件 /** to=>即将要进入的目标路由对象 from=>当前导航即将要离开的路由对象 next=>调用该方法后，才能进入路由后置守卫（afterEach） **/ router.beforeEach((to, from, next) => { // 判断当前路由需不需要鉴权 if (to.meta.requireAuth) { // 需要鉴权进入 // 登录标记 const token = localStorage.getItem('token'); // 判断是否登录，登录的话获取到的则不是空 if (token) { next() } else { // 未登录，跳转登录页面 next('/login') } } else { // 不需要鉴权直接跳转页面 next() } })
以上就是路由元信息权限鉴别方案，这种方案的缺点在于，需要每个页面都单独添加权限，太过于麻烦，不过这也正是它的优点，可以让权限细分化;
路由白名单鉴权
路由白名单鉴权就是定义一个白名单数组，只有在当前白名单数组中才可以无需授权进行跳转，其他的都需要登录后才可以进行的操作
//vue-router的index.js文件 import Router from 'vue-router' const routes = [ { path: '/', name: 'home', component: ()=>import('@/views/Home') }, { path:'/login', name:'login', component:()=>import('@/views/Login') }, { path:'/blog', name:'blog', component:()=>import('@/views/Blog'), }, { path:'/notes', name:'notes', component:()=>import('@/views/Notes'), } ] export default new Router({ mode: 'hash', scrollBehavior: () => ({ y: 0 }), routes: constantRouterMap })
这里也是通过前置守卫的方式实现,因为都是需要在页面跳转前进行鉴权的
// 路由白名单 cosnt roster = ['/home', '/login']; router.beforeEach((to, from, next) => { // 判断当前路由需不需要鉴权,不需要直接跳转 if (roster.includes(to.path)) { // 不需要鉴权直接跳转页面 next() return; } // 需要鉴权进入 // 登录标记 const token = localStorage.getItem('token'); // 判断是否登录，已登录就跳转页面，未登录就跳转登录 token ? next() : next('/login'); })
我们通过路由白名单管理是不是感觉好多了，没有路由元信息那么繁琐化，这种的话如果一涉及到多方鉴权判断就比较复杂了
功能鉴权
功能鉴权其实蛮常见的，功能鉴权其实就是通过vue自定义指令实现的，使用场景有很多，比如:
- 添加购物车，用户未登录只能浏览商品，添加购物车的时候需要判断是否登录
- 管理后台登录后,有些用户有权限能够操作一些按钮，有些用户没有权限操作这些按钮，我们就让那些没有权限操作的用户看不到这些按钮
我们这里就以购物车为例子
Vue.directive('authority', function(el){ //获取用户登录标识 const token = localStorage.getItem('token'); // 判断用户是否拥有权限 if (!token) { // 无权限就跳转登录页面 router.push('/login') return; } // 后续需要权限的操作就在这里写 })
以上就是鉴权的全部内容！最后祝大家每天开开心心的，坚持努力,无惧未来！
