此文章根据视频教程进行整理前端面试官必问系列-后台系统的权限控制与管理，建议搭配视频教程一起食用效果更佳

在Web 系统中，权限很久以来一直都只是后端程序所控制的。 为什么呢？ 因为Web 系统的不质围绕的是数据， 而和数据库最紧密接触的是后端程序。所以在很长的一段时间内， 权限一直都只是后端程序要考虑的话题。 但是随看前后端分离架构的流行， 越来越多的项目也在前端进权限控制。

一、 权限相关概念

1.1 权限的分类

• 后端权限
  从根不上讲前端仅仅只是视图层的展示， 权限的核心是在于服务器中的数据变，所以后端才是权限的关键，后端权限可以控制某个用户是否能够查询数据， 是否能够修改数据等操作

1. 后端如何知道该请求是哪个用户发过来的
   cookie
   session
   token
2. 后端的权限设计RBAC
   用户
   角色
   权限

• 前端权限

        前端权限的控制本质上来说， 就是控制端的视图层的展示和前端所发送的请求。但是只有前端权限控制没有后端权限控制是万万不可的。 前端权限控制只可以说是达到锦上添花的效果。

1.2 前端权限的意义

如果仅从能够修改服务器中数据库中的数据层面上讲， 确实只在后端做控制就足够了， 那为什么越来越多的项目也进行了前端权限的控制， 主要有这几方面的好处

• 降低非法操作的可能性

不怕赃偷就怕贼惦记， 在页面中展示出一个就算点击了也最终会失败的按钮，势必会增加有心者非法操作的可能性

• 尽可能排除不必要清求， 减轻服务器压力

没必要的请求， 操作失败的清求， 不具备权限的清求， 应该压根就不需要发送， 请求少了， 自然也会减轻服务器的压力

• 提高用户体验

根据用户具备的权限为该用户展现自己权限范围内的内容， 避免在界面上给用户带来困扰， 让用户专注于分内之事

二、 前端权限控制思路

2.1 菜单的控制

在登录请求中， 会得到权限数据， 当然， 这个需要后端返回数据的支持． 前端根据权限数据， 展示对应的菜单． 点击菜单， 才能查看相关的界面

2.2 界面的控制

不同用户登录以后显示的界面是不同的

如果用户没有登录， 手动在地址栏敲入管理界面的地址， 则需要跳转到登录界面
如果用户已经登录， 如果手动敲入非权限内的地址， 则需要跳转404 界面

2.3 按钮的控制

在某个菜单的界面中， 还得根据权限数据， 展示出可进行操作的按钮，比如删除， 修改， 增加

2.4 请求和响应的控制

如果用户通过非常规操作， 比如通过浏览器调试工具将某些禁用的按钮变成启用状态， 此时发的请求， 也应该被前端所拦截

三、实现步骤

3.1 权限菜单栏控制

用户登录之后服务端返回一个数据，这个数据有菜单列表和token，我们把这个数据放入到vuex中，然后主页根据vuex中的数据进行菜单列表的渲染

问题： 刷新界面，菜单栏消失(vuex数据消失)

原因：因为菜单栏是登陆之后才获取到的，获取菜单数据之后，就存放在vuex 中，一旦刷新，vuex中数据会重新初始化，所以会变成空数组

解决： 将数据存储在sessionStorage中，并让其和vuex中的数据保持同步

export default new Vuex.Store({
  state: {
    rightList: JSON.parse(sessionStorage.getItem('rightList') || '[]'),
  },
  mutations: {
    setRightList (state, data) {
      state.rightList = data
      //将数组转化成字符串存储在sessionStorage中
      sessionStorage.setItem('rightList', JSON.stringify(data))
    },
   }

3.2 界面的控制

1.正常的逻辑是通过登录界面，正常登陆成功之后跳转到管理平台界面。但是用户直接敲入管理平台地址，也是可以直接跳入管理平台界面。所以应该在某个时机判断是否登录。

2.用路由导航守卫，虽然菜单已经被控制住了，但是路由信息还是完整的存在于浏览器中，如果一个用户不具备角色的这个菜单，但是他如果从地址栏中敲入，也是可以访问

• 如何判断是否登录

登录成功后，将token数据存储在sessionStorage中，判断是否登录

sessionStorage.setItem('token', res.data.token)

• 什么时机

1. 路由导航守卫

路由导航守卫，固然可以在每次路由发生变化时，从vuex中取出rightList判断用户将要访问的界面，用户有没有哦权限，但是从另一个角度来说，用户不具备权限的路由，是否应该压根不存在

防止用户跳过登录界面。路由发生变化时，都会先经过导航守卫

// 路由导航守卫
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next()
  } else {
    const token = sessionStorage.getItem('token')
    if (!token) {
      next('/login')
    } else {
      next()
    }
  }
})

问题： 这样用户在登录之后就可以访问其他界面了，但如果用户A登录之后他只能访问a页面，他不具备访问b页面的权限，但是这时候他还是可以通过地址栏输入进入到b页面

解决： 当然我们也可以设置路由导航守卫，但是如果有多个页面，设置会非常不方便，并且对于用户A来说，它是不用访问b页面的，这时候我们何不对A不显示b页面，这个时候我们就用到了动态路由

2. 动态路由

根据当前用户所拥有的的权限数据来动态添加所需要的路由

1. 先定义好所有的路由规则

   // 动态路由
   const tableRule = {
     path: '/table',
     name: 'table',
     component: () => import('@/views/table/ceshi.vue')
   }
   const imageRule = {
     path: '/image',
     name: 'image',
     component: () => import('@/views/image')
   }
   const userRule = {
     path: '/users',
     name: 'users',
     component: () => import('@/views/users')
   }

// 路由规则和字符串的映射关系
const ruleMapping = {
  table: tableRule,
  users: userRule,
  image: imageRule

2. 登录成功之后动态添加路由，注意这个initDynamicRoutes的方法需要暴露出去在登录页面调用

在登陆按钮触发时调用

 // 根据用户所具备的权限 动态添加路由规则
          initDynamicRoutes()

这样当用户A在地址栏输入自己不能访问的路由时，则不会跳转到该页面，跳转到404页面

问题： 如果我们重新刷新的话动态路由就会消失，动态路由是在登录成功之后才会调用的，刷新的时候并没有调用，所以动态路由没有添加上

解决： 可以在app.vue中的created中调用添加动态路由的方法

<script>
import { initDynamicRoutes } from '@/router'
export default {
  created () {
    // 解决页面刷新动态路由丢失问题 但是如果写了404页面 此函数无效 还未解决该问题
    initDynamicRoutes()
  }
}
</script>

3.3 按钮的控制

关键点：

1.自定义指令使用

2.在自定义指令中，怎样得到当前路由权限的数据，通过路由的元数据进行传递，router.currentRoute.meta,,得到当前路由的meta，即动态添加路由的过程中增加的规则，用户所对应的权限数据，根据权限数据的对比，以及v-permission指令的使用，达到控制一些按钮功能显示、隐藏等。

虽然用户可以看到某些界面了， 但是这个界面的一些按钮该用户可能是没有权限的。 因此， 我们需要对组件中的一些按钮进行控制， 用户不具备权限的按钮就隐藏或者禁用， 而在这块的实现中， 可以把该逻辑放到自定义指令中

比如我们可以根据后端返回的数据right来判断用户有什么权限，如下图

 
添加自定义指令 控制按钮

3.4 请求和相应的控制

请求控制

• 除了登录请求都得要带上token ， 这样服务器才可以鉴别你的身份

  这块使用的就是asiox的请求拦截器设置

• 如果发出了非权限内的请求， 应该直接在前端范围内阻止， 虽然这个请求发到服务器也会被拒绝

非权限内的请求：比如a用户是不能够操作该页面的按钮的，但是他通过f12调试把按钮改为可点击，如果我们不对这个请求进行处理，那么这个请求就会发送出去

响应控制

得到了服务器返回的状态码401, 代表token 超时或者被篡改了，此时应该强制跳转到登录界面

四、小结

前端权限的实现之须要后端提供数据支持， 否则无法实现。
返回的权限数据的结构， 前后端需要沟通协商怎样的数据便用起来才最方便

4.1 菜单控制

权限的数据需要在多组件之间共享， 因此采用vuex
防止刷新界面， 权限数据丢失， 所以需要存在sessionStorage， 并目要保证两者的同步

4.2 界面控制

路由的导航守卫可以防止跳过登录界面
动态路由可以让不具备权限的界面的路由规则压根就不存在

4.3 按钮控制

路由规则中可以增加路由元数据meta(存储当前所具有的权限)
通过路由对象可以得到当前的路由规则以及存在此规则中的meta 数据
自定义指令可以很方便的实现按钮控制

4.4 请求和响应控制

请求拦截器和响应拦截器的使用
请求方式的约定restful