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 相关文章推荐
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
js data日期初始化的5种方法
Dec 29 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
微信小程序如何播放腾讯视频的实现
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中rename函数用法分析
2014/11/15 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
jQuery设计思想
2017/03/07 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
Python抓取百度查询结果的方法
2015/07/08 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
python机器人运动范围问题的解答
2019/04/29 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
python sorted函数的小练习及解答
2019/09/18 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
python list多级排序知识点总结
2019/10/23 Python
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
毕业生动漫设计求职信
2013/10/11 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
人事任命书范本
2015/09/21 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
MySQL快速插入一亿测试数据
2021/06/23 MySQL
mybatis 获取更新记录的id
2022/05/20 Java/Android
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang