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对象和属性的创建方法
Jan 15 Javascript
又一个图片自动缩小的JS代码
Mar 10 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
JS的千分位算法实现思路
Jul 31 Javascript
简单的Jquery全选功能
Nov 07 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
JavaScript创建对象方法实例小结
Sep 03 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 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下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
python网络应用开发知识点浅析
2019/05/28 Python
pandas如何处理缺失值
2019/07/31 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
小学校长个人总结
2015/03/03 职场文书
免职通知
2015/04/23 职场文书
结婚典礼致辞
2015/07/28 职场文书
React如何创建组件
2021/06/27 Javascript
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server