对权限管理的一些理解

后台系统几乎都会涉及权限管理，实现的方式有蛮多的，只是前端只能做样子货，最终的权限管理还是得后台做。今天说说自己认知的权限管理的几个方式。

先说说一般后台要做的权限，接口级别，后台需要对每个接口都做权限，当这个用户没有对这个接口操作的权限（一般就是增删改查），应该返回一个约定好的code，让前端知道没有权限，然后前端通过这个code去做一些友好的提示。不要觉得后台做这个很麻烦，不说后台必须做，就我做个的几个系统，Java和php还有.net应该都有现成的机制去做，应该说是标配。

接着就是前端显示和操作的权限了。先说刚说的code返回的操作，一般项目都会封装一个全局的请求，axios还是fetch还是ajax（如果没有，当我没说），所以全局拦截约定好的code，没权限的是要弹窗提示还是跳转暂无权限的页面。

按钮权限：
按钮的权限也很简单，就是控制显示隐藏，后台会给按钮权限的字段，可以约定好格式。jq可以移除没有权限的dom，vue原理用的是v-if，也可以自己写个指令，其实原理也是v-if，通过el.remove()方法移除这个没有权限的按钮。react也很简单，本身就是js，直接操作。这只是显示层面的，但是如果有人直接调用接口，还是得后台拦截，前端只是做一层显示层面的权限。

菜单权限：
菜单权限方式就多了，一般后台会返回菜单的列表，你要自己处理组装成你的展示结构，这边以vue为主说几个方式。

1：请求拦截：
显示了后台返回的菜单，不做其他操作，就是只通过接口拦截做权限控制，最简单，效果也挺好，不需要那么多乱七八糟的逻辑，我最喜欢的方式。

2：路由拦截：
在路由前置钩子进行判断，判断即将进入的页面是否在返回的列表里面，可以防止那些记住页面地址，但是没有这个菜单的情况进行拦截。

let havePemission = {
  '/': true,
  '/about1': true
}
router.beforeEach((to, from, next) => {
  if(havePemission[to.path]){
    next()
  }
})

这边只是简单提一下，权限的可以是后台返回，也可以是自己组装，一般存储在本地或者vuex。

3：动态路由：
vue提供的addRoutes可以实现，只是现在不支持删除和刷新，可以在路由拦截里面做：

let haveAdd = false;
router.beforeEach((to, from, next) => {
  if(!haveAdd){
    let defaultRouter = [{
      path: '/about1',
      name: 'About1',
      component: () => import(/* webpackChunkName: "about1" */ '../views/About1.vue')
    },
      {
        path: '/about2',
        name: 'About2',
        component: () => import(/* webpackChunkName: "about2" */ '../views/About2.vue')
      }]
    haveAdd = true;
    router.addRoutes(defaultRouter);
  }
  next()
})

一定要有个标识，否在会报重复name的错，如果刷新了标识重置也是可以的。这边是把数据写死，一般会存储在本地，也可以存储在vuex，对异步要根据实际情况处理。

其实权限管理用来用去就这几个组合，优缺点都有，但是最终还是后台要做好，前端只是显示做一做权限。比如不是动态路由，那么用户记住一些没有权限进入的地址是一种情况，动态路由，暂时不支持刷新和删除，初始化之后如果要做一些操作就不好操作了，除非手动刷新。然后每次都要在路由守卫里面进行判断，也是缺点。优点就是体验好一些，不需要等请求返回。还是最喜欢请求拦截那个方式。