vuex根据不同的用户权限展示不同的路由列表功能
需求描述
最近接到一个新的需求，要求将系统的用户进行分类，用户登陆后根据不同的用户权限展示不同的功能列表。
这个功能在后台管理中很常见，大致的思路是
后台返回用户类型，前端根据用户类型生成该类用户可以访问的功能列表。
后台返回功能列表，前端进行循环渲染。
一个在前端生成功能列表，一个在后端返回，两个本质上类似，最终都是需要得到一个该用户的功能功能列表。但是两者都有一个不可忽视的东西，就是如果用户直接在地址栏输入会怎么样。
技术选型
由于公司项目不算小，为了后期维护方便，我还是选择了使用 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根据不同的用户权限展示不同的路由列表功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
这篇文章主要给大家介绍了.vue 文件是如何编译成浏览器可执行的文件,文中通过代码示例将编译流程介绍的非常详细,对我们的学习或工作有一定的价值,感兴趣的同学可以参考阅读下2023-09-09
elementui+vue+axios实现文件上传本地服务器
这篇文章主要为大家详细介绍了elementui+vue+axios实现文件上传本地服务器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了Vue2.x与Vue3.x中路由钩子的区别，分别介绍了路由钩子的分类，路由配置守卫钩子以及组件内守卫钩子等有需要的朋友可以借鉴参考下2021-09-09
这篇文章主要介绍了element-ui中按需引入的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了vue项目实现表单登录页保存账号和密码到cookie功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
Vue装饰器中的vue-property-decorator 和 vux-class使用详解
这篇文章主要介绍了Vue装饰器中的vue-property-decorator 和 vux-class使用详解,通过示例代码给大家介绍的非常详细，对vue-property-decorator 和 vux-class的使用感兴趣的朋友一起看看吧2022-08-08
详解vue使用vue-layer-mobile组件实现toast，loading效果
这篇文章主要介绍了详解vue使用vue-layer-mobile组件实现toast，loading效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
给大家分享了关于Vue.js想成为高手的5个总要知识点，需要的朋友可以学习下。2018-04-04
这篇文章主要介绍了Vue3中如何检测数组的变化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了vue里swiper的一些坑及swiper在vue中的使用,本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
最新评论