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


Posted in Javascript onSeptember 20, 2019

需求描述

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

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

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

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

技术选型

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

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

Vuex

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

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

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

主要代码很简单,只需要导入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根据不同的用户权限展示不同的路由列表功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
JavaScript正则表达式和级联效果
Sep 14 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
JS轻量级函数式编程实现XDM三
Jun 16 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 #Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 #Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 #Javascript
微信用户访问小程序的登录过程详解
Sep 20 #Javascript
解决layUI的页面显示不全的问题
Sep 20 #Javascript
小程序如何获取多个formId实现详解
Sep 20 #Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 #Javascript
You might like
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
Node.js学习入门
2017/01/03 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
Python struct.unpack
2008/09/06 Python
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
pandas 层次化索引的实现方法
2019/07/06 Python
python每天定时运行某程序代码
2019/08/16 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
法律专业应届本科毕业生求职信
2013/10/25 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
助理政工师申报材料
2014/06/03 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL