vue后台管理系统权限控制思路

最近做了一个后台的权限管理功能,难的不是代码而是思路,总结一下:

  1. 请求服务器的具体方法都封装到js文件中,然后在vuex的modules引用,调用时直接调用vuex的mutations方法即可。这一套思路适用于中大型项目,对于后台管理系统来说正好不过,可以方便的解决不同页面之间传参,以及token、id等关键数据的存储、删除。
  2. 登录方法:第一步进入后台肯定得输入用户名密码登录,在login页面(或者你们自己弄得登录页面)调用Mutations暴露出来的login方法,传入用户名密码(可以md5加密),返回值需要有userId,token等信息,可以和后端沟通,最好是都放在Cookie中,可以使用js-cookie库,然后自己封装一个cookie方法,这个就不多说了,一搜一大把。
  3. 登录成功之后,可以选择跳转到首页,一般来说后台的框架有layout组件,跳转进来就会进入到这里,所以可以在这里写一个init方法,在created生命周期中调用。
  4. init方法:先判断登录的userId、token等信息是否存在于cookie中,如果不存在,直接跳转到登录页面;如果存在,那么就可以进行角色选择条件判断,如果cookie中存在角色信息roleInfo,那么就可以直接请求资源列表,进行router的操作。
  5. 角色选择:需要一个弹框组件,我们根据userId等信息,向服务器请求该用户绑定的角色,每个角色在后台会配置不同的资源,点击角色触发change事件,将选择的信息存到cookie中,然后根据选择的roleId去服务器请求资源
  6. 资源请求:根据角色请求到的资源可以和router中的路由做对比,我们使用的方法是,给所有路由的配置信息中的meta标签里加入hidden属性,默认为true,再加一个url属性,配置完整路由地址,然后在layout渲染路由时增加判断,如果meta.hidden为true,就不渲染该路由。
  7. 对比方法:返回的资源中携带资源名resourceName和资源路径resourceUrl,我们可以把所有的资源以resourceName:resourceUrl的形式放入一个对象obj中,然后遍历router中的所有配置路由,通过reflact.has(obj,i.meta.url)方法,然后重新赋值router文件中的路由配置变量。
  8. 后台功能:上面我们实现了权限控制的前端逻辑,剩下的就是后台管理系统的功能了,需要用户配置,角色配置,资源配置,用户角色配置,角色资源配置,都有联动关系,这个就不用多提了,重要的还是上述七点的思想。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值