网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

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
})

分享名称:vuex根据不同的用户权限展示不同的路由列表功能-创新互联
标题路径:http://bjjierui.cn/article/gpppo.html

其他资讯