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

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根据不同的用户权限展示不同的路由列表功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 详解VueJS应用中管理用户权限

    详解VueJS应用中管理用户权限

    在需要身份验证的前端应用里,我们经常想通过用户角色来决定哪些内容可见.比如,游客身份可以阅读文章,但注册用户或管理员才能看到编辑按钮. 在前端中管理权限可能会有点麻烦.你之前可能写过这样的代码: if (user.type === ADMIN || user.auth && post.owner === user.id ) { ... } 作为代替方案,一个简洁轻量的库--CASL--可以让管理用户权限变得非常简单.只要你用CASL定义了权限,并设置了当前用户,就可以把上面的代码改为这样:

  • Vue-Access-Control 前端用户权限控制解决方案

    Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由.视图.请求三个层面的控制,使开发者可以实现任意颗粒度的用户权限控制. 整体思路 会话开始之初,先初始化一个只有登录路由的Vue实例,在根组件created钩子里将路由定向到登录页,用户登录成功后前端拿到用户token,设置axios实例统一为请求headers添加{"Authorization":token}实现用户鉴权,然后获取当前用户的权限数据,主要包

  • Vue2.0用户权限控制解决方案的示例

    Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由.视图.请求三个层面的控制,使开发者可以实现任意颗粒度的用户权限控制. 安装 版本要求 Vue 2.0x Vue-router 3.x 获取 git:git clone https://github.com/tower1229/Vue-Access-Control.git npm:npm i vue-access-control 运行 //开发 npm run dev

  • Vue2.0用户权限控制解决方案

    Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由.视图.请求三个层面的控制,使开发者可以实现任意颗粒度的用户权限控制. 安装 版本要求 Vue 2.0x Vue-router 3.x 获取 git:git clone https://github.com/tower1229/Vue-Access-Control.git npm:npm i vue-access-control 运行 //开发 npm run dev

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

    需求描述 最近接到一个新的需求,要求将系统的用户进行分类,用户登陆后根据不同的用户权限展示不同的功能列表. 这个功能在后台管理中很常见,大致的思路是 后台返回用户类型,前端根据用户类型生成该类用户可以访问的功能列表. 后台返回功能列表,前端进行循环渲染. 一个在前端生成功能列表,一个在后端返回,两个本质上类似,最终都是需要得到一个该用户的功能功能列表.但是两者都有一个不可忽视的东西,就是如果用户直接在地址栏输入会怎么样. 技术选型 由于公司项目不算小,为了后期维护方便,我还是选择了使用 vuex

  • vue-router结合vuex实现用户权限控制功能

    为了实现前端校验用户,后端需要在用户登录的时候记录下该用户的状态并加密之后返回给前端.之后该用户的所有请求都应该附带这个加密后的状态,后端取到这个状态解密,并与之前保存的状态对比,以此来判断该用户是否登录或合法. 我这里使用了node简单了写了个本地的express服务,来实现上述功能.完整的代码直接贴出来: // server.js const express = require('express'); const bodyParser = require('body-parser'); co

  • 关于vue中根据用户权限动态添加路由的问题

    关于vue中根据用户权限动态添加路由的问题

    根据用户的权限,展示不同的菜单页. 知识点 路由守卫(使用了前置守卫):根据用户角色判断要添加的路由 vuex:保存动态添加的路由 难点 每次路由发生变化时都需要调用一次路由守卫,并且store中的数据会在每次刷新的时候清空,因此需要判断store中是否有添加的动态路由. (若没有判断 则会一直添加 导致内存溢出) 根据角色判断路由 过滤动态路由 判断每条路由角色是否与登录传入的角色一致 <template> <div> <el-menu :default-active=&q

  • javaWeb用户权限控制简单实现过程

    javaWeb用户权限控制简单实现过程

    最近在做一个网站类型的项目,要对用户的访问模块(权限)进行控制,所以设计并实现了一套简单的权限控制功能. 1. 数据库设计  用户:users 模块:modules SQL代码: /* Target Server Type : MYSQL Target Server Version : 50628 File Encoding : 65001 Date: 2016-08-26 10:35:28 */ SET FOREIGN_KEY_CHECKS=0; -- --------------------

  • 用户权限管理设计[图文说明]

    用户权限管理设计[图文说明]

    最近在一个项目中设计的一个用户权限的设计,很乐意与大家一起讨论及分享. 设计思路 我的设计思路或者说是我想要实现的功能 1.用户的权限通过角色来控制,一个用户可以拥有多个角色. 2.用户拥有不同角色时,其权限应该是多个角色相互的补集. 3.一个角色拥有多个模块 4.用户的前台菜单显示根据角色所拥有的模块所决定,不同的用户在前端显示的操作菜单是不一样的. 5.页面中的功能按钮根据模块中所包含的功能所定义,通过模块及角色所拥有的权限进行控制 6.可看某个模块有哪些用户,哪些对应角色,并对其进行特殊权

  • java web实现用户权限管理

    java web实现用户权限管理

    最近在做一个网站类型项目,主要负责后台,ui框架选型为jquery easy ui,项目架构为spring mvc + spring jdbc,简单易用好上手!搭建好框架后开始了第一个任务,设计并实现一套简单的权限管理功能. 一套最基本的权限管理包括用户.角色.资源. 实现效果: 数据库设计,设计如下: 用户:user 角色:role 用户-角色:user_role 资源:resource(包括上级菜单.子菜单.按钮等资源) 角色-资源:role_resource 标准的权限管理系统设计为以上5

随机推荐