vuex根据不同的用户权限展示不同的路由列表功能

网络编程 2024/12/26 佚名

3 1 2

需求描述

最近接到一个新的需求，要求将系统的用户进行分类，用户登陆后根据不同的用户权限展示不同的功能列表。

这个功能在后台管理中很常见，大致的思路是

后台返回用户类型，前端根据用户类型生成该类用户可以访问的功能列表。
后台返回功能列表，前端进行循环渲染。

一个在前端生成功能列表，一个在后端返回，两个本质上类似，最终都是需要得到一个该用户的功能功能列表。但是两者都有一个不可忽视的东西，就是如果用户直接在地址栏输入会怎么样。

技术选型

由于公司项目不算小，为了后期维护方便，我还是选择了使用 vuex 完成上述的功能。

主要想法为在vuex中保存用户登陆后的状态，以及用户可访问的路由列表，这样的话，不涉及到父子组件间的数据传递，可以很方便的在单个组件中获取到用户的权限路由列表。

Vuex

如果只是想简单的使用一个vuex,了解state,mutation,action就足够你使用

在src文件夹下，创建一个store文件夹，如果项目简单，可以将state,mutations,actions,getters等写入到一个文件中

主要代码很简单，只需要导入Vue,Vuex，并且调用Vue.use(Vuex)。

结合官方解释的个人理解，一个vuex文件就是一个仓库，它包含着你需要共享的变量、有关的事件、以及可以执行这些事件的行为，我们把这些导出去，在单个组件中引入，我们便可以在单个组件中对共享的变量进行改变。

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state
})

state

state主要功能是用来定义变量,代表你需要共享的一个状态。比如，我想要共享用户可以访问的路由列表，所以，我需要先在state中定义一个存放路由列表的变量。

store/index.js中

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {  
  pressionList: [],//用户允许登陆的路由列表
  loginTag:false//用户登陆状态 
}
export default new Vuex.Store({
state
})

单个组件中使用state，有两种方法，直接获取，或者使用mapState辅助工具

总结

以上所述是小编给大家介绍的vuex根据不同的用户权限展示不同的路由列表功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

vuex,用户权限,vue,路由列表

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“vuex根据不同的用户权限展示不同的路由列表功能”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年12月26日

vuex根据不同的用户权限展示不同的路由列表功能

浅谈layui分页控件field参数接收对象的问题

微信小程序如何播放腾讯视频的实现

评论“vuex根据不同的用户权限展示不同的路由列表功能”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接