从0到1搭建element后台框架之权限篇

前言

首先仍是谢谢各位童鞋的大大的赞赞，大家的支持是我前进的动力！上周写了一篇从0到1搭建element后台框架，不少童鞋留言提到权限问题，这一周就给你们补上。GitHub

1、jwt受权认证

如今大多数项目都是采用jwt受权认证，也就是咱们所熟悉的token登陆身份校验机制，jwt的好处多多，因为jwt是由服务端生成，中间人修改密串后，服务端会校验不过，安全有效。通常呆在请求头上的Authorization里面。前端童鞋通常获取token后经过vuex存储起来，随后数据持久化存到session中。

路由跳转验证token

首先在路由跳转的时候须要验证vuex是否存储了token,若是没有token的话直接跳到登录页面获取token。

if (to.path !== '/login' && !store.state.token) {
        next('/login')
        NProgress.done() // 结束Progress
      } else {
        next();
     }

请求拦截带上token

详细请看项目中的router.js

本地存在token以后，咱们在每次请求接口的时候都须要带上token来验证token的合法性。

//在请求前拦截
    if (store.state.token) {
            config.headers["Authorization"] = "Bearer " + store.state.token;
        }

若是token不合法，全局错误处理，直接跳到登录页面

case 401:
        messages("warning", "用户登录过时，请从新登录");
        store.commit('COMMIT_TOKEN','')
        setTimeout(() => {
            router.replace({
                path: "/login",
                query: {
                    redirect: router.currentRoute.fullPath
                }
            });
        }, 1000);
        break;

详细代码看项目中的request.js

2、菜单权限

本项目中，我主要是经过后端传过来的角色类型来判断导航菜单的显示与隐藏。
也就是说首先前端请求接口，后端返回token,以及对应的角色，好比项目中用admin登录的话，roles=['admin'],用user登录的话roles=['user']。

接下来我这边设计了一份菜单表和一份路由表，路由表主要是为了注册路由，不须要考虑层级关系。而菜单表须要考虑层级关系，里面能够配置主菜单，子菜单，图标等等一系列的东西，固然菜单表最好是经过接口数据从后端传过来。值得注意的是不管是菜单表，仍是路由表，里面都有一个meta配置项。里面能够配置咱们的角色权限。路由表对应的菜单表角色权限须要一致。没有配置角色权限的菜单默认都开放。

menu.js

{
        icon: "el-icon-question",
        index: "premission",
        title: "权限测试",
        subs: [{
            index: "permission",
            title: "菜单测试",
            meta: {
                roles: ['admin']
            }
        },
        {
            index: "permissionBtn",
            title: "按钮权限",
        },
    
        ]
    }

router.js

{
      path: '/permission',
      component: getComponent('permission', 'permission'),
      meta: {
        title: '菜单权限',
        roles: ['admin']
      }
    },

根据角色过滤菜单

如今咱们开始编写菜单逻辑，进入Aside.vue,首先根据角色过滤菜单表menu.js

/**
     * @param {Arrary} menus 菜单
     * @param {Arrary} roles 角色
     * @return {Arrary} res 过滤后的菜单
     */
    filterMenus(menus, roles) {
      const res = [];
      menus.forEach(route => {
        const tmp = { ...route };
        //hasPermission判断权限是否匹配
        if (this.hasPermission(roles, tmp)) {
          if (tmp.subs) {
            tmp.subs = this.filterMenus(tmp.subs, roles);
          }
          res.push(tmp);
        }
      });
      return res;
    },

/**
     * 经过meta.role判断是否与当前用户权限匹配
     * @param roles
     * @param menu
     */
    hasPermission(roles, menu) {
      if (menu.meta && menu.meta.roles) {
        return roles.some(role => menu.meta.roles.includes(role));
      } else {
        return true;
      }
    },

过滤结果

computed: {
        items() {
          let items = this.filterMenus(menu, this.$store.state.roles);
          return items;
        }
      },

这样就得到了权限菜单

到目前为止，权限控制基本完成，不过在项目运行的过程当中，还发现一个bug。本项目中存在一个tagList,也就是打开的导航标签，当用户从admin切换到user的时候打开的导航标签依旧存在，也就是说用户能够经过导航标签进入premission页面。此时我这边直接经过路由拦截来处理此时的状况。

if(to.meta.roles){
        to.meta.roles.includes(...store.getters.roles)?next():next('/404')
      }else{
        next();
     }

没有权限的页面一概进入404页面。

3、按钮权限控制

按钮级别的权限说实话通常都经过数据接口来控制是否展现，点击等等状况。若是光有前端来控制绝对不是可行之道。

项目中按钮权限注册全局自定义指令来完成的。首先src下面新建一个directive文件夹，用于注册全局指令。在文件夹下新建一个premissionBtn.js。若是对自定义指令不熟的话能够查阅官方文档。

全局指令

import Vue from 'vue'
    import store from '@/store/store'
    //注册一个v-allowed指令
     Vue.directive('allowed', {
        inserted: function (el, bingding) {
            let roles = store.getters.roles
            //判断权限
            if (Array.isArray(roles) && roles.length > 0) {
                let allow = bingding.value.some(item => {
                    return roles.includes(item)
                })
                if (!allow) {
                    if (el.parentNode) {
                        el.parentNode.removeChild(el)
                    }
                }
            }
        }
    })

引用

import './directive/premissionBtn'

那自定义指令如何使用呢？

<div class="premissionBtn">
        <el-button type="primary" v-allowed="['admin']">我是只有admin的时候才能显示</el-button>
        <br>
        <el-button type="info" v-allowed="['user']">我是只有user的时候才能显示</el-button>
        <br>
        <el-button type="warning" v-allowed="['admin','user']">我是admin或者user才能显示</el-button>
        <br>
        <el-button type="danger">任何角色均可以显示</el-button>
    </div>

后记

本项目还有许多须要完善和优化的地方，最后项目存在着不足或者更好的方法，请及时提出来，方便修正。谢谢你们。

相关文章连接

从0到1搭建element后台框架

（打包优化）从0到1搭建element后台框架优化篇