夏天到了，还不会Vue鉴权吗

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

在项目中最为常见的就是权限的分配与管理，权限管理可以由前端控制和后端控制，我们今天着重讲一下前端的权限管理，今天我们就用Vue来实现权限管理，由于需要配合Vue-Router进行使用，也被成为路由鉴权

鉴权的使用场景

鉴权一般是指需要权限才能访问的页面(页面鉴权)和需要权限才能点击的按钮(功能鉴权)

页面鉴权

我们常见的就是登录鉴权的操作，有些页面只能登录以后才可以进行访问，也可以结合后端实现RABC的鉴权操作,我们这里就以登录为例

页面鉴权实现思路

我们在跳转页面之前，先判断是否登录,未登录只能访问不需要登录权限的页面,如果访问需要登录的页面则全部重定向到登录页面，让用户进行登录之后在跳转访问到刚刚需要权限的页面

页面鉴权流程

我们可以通过流程图的方式，讲解如何进行登录鉴权的成操作

graph TD
   访问页面 --> 判断页面是否需要权限
   判断页面是否需要权限-->需要权限
   需要权限 -->判断是否登录
   判断是否登录-->未登录-->跳转到登录页面-->用户进行登录操作-->登录成功-->放行,让用户查看页面内容
   判断是否登录-->已登录-->放行,让用户查看页面内容
   判断页面是否需要权限-->不需要权限-->放行,让用户查看页面内容

前端判断当前页面都有哪些权限的方式有俩种，第一种是通过路由元信息的方式实现，第二种是通过设置一个白名单的方式进行实现，我们这里就把这俩种都讲解一下

路由元信息权限鉴别方案

通过在路由对象中的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自定义指令实现的，使用场景有很多，比如:

1. 添加购物车，用户未登录只能浏览商品，添加购物车的时候需要判断是否登录
2. 管理后台登录后,有些用户有权限能够操作一些按钮，有些用户没有权限操作这些按钮，我们就让那些没有权限操作的用户看不到这些按钮

我们这里就以购物车为例子

    Vue.directive('authority', function(el){
    //获取用户登录标识
      const token = localStorage.getItem('token');
      // 判断用户是否拥有权限
      if (!token) { 
        // 无权限就跳转登录页面
          router.push('/login')
          return;
      }
      // 后续需要权限的操作就在这里写
    })
复制代码

以上就是鉴权的全部内容！最后祝大家每天开开心心的，坚持努力,无惧未来！