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 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
js 页面执行时间计算代码
Mar 04 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
微信小程序如何播放腾讯视频的实现
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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
php 魔术函数使用说明
2010/02/21 PHP
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
用javascript实现点击链接弹出"图片另存为"而不是直接打开
2007/08/15 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
Python实现把数字转换成中文
2015/06/29 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
python爬取微信公众号文章
2018/08/31 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
方正Java笔试题
2014/07/03 面试题
自动化专业本科毕业生求职信
2013/10/20 职场文书
大型活动策划方案
2014/01/12 职场文书
高三生物教学反思
2014/01/25 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书