资讯专栏INFORMATION COLUMN

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

NervosNetwork / 1037人阅读

摘要:项目中按钮权限注册全局自定义指令来完成的。如果对自定义指令不熟的话可以查阅官方文档。相关文章链接从到搭建后台框架打包优化从到搭建后台框架优化篇

前言

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

一、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

二、菜单权限

本项目中,我主要是通过后端传过来的角色类型来判断导航菜单的显示与隐藏。
也就是说首先前端请求接口,后端返回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页面。

三、按钮权限控制

按钮级别的权限说实话一般都通过数据接口来控制是否展示,点击等等情况。如果光有前端来控制绝对不是可行之道。

项目中按钮权限注册全局自定义指令来完成的。首先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"

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

     
我是只有admin的时候才能显示
我是只有user的时候才能显示
我是admin或者user才能显示
任何角色都可以显示
后记

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

相关文章链接

从0到1搭建element后台框架

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103901.html

相关文章

  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0
  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0
  • Spring Security

    摘要:框架具有轻便,开源的优点,所以本译见构建用户管理微服务五使用令牌和来实现身份验证往期译见系列文章在账号分享中持续连载,敬请查看在往期译见系列的文章中,我们已经建立了业务逻辑数据访问层和前端控制器但是忽略了对身份进行验证。 重拾后端之Spring Boot(四):使用JWT和Spring Security保护REST API 重拾后端之Spring Boot(一):REST API的搭建...

    keelii 评论0 收藏0

发表评论

0条评论

NervosNetwork

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<