vue-element-template 设置权限管理配置文件 \ vue用户权限管理

最近使用vue-element-template模板做系统时,需要实现用户权限管理,通过后端传来的roles字段来判断不同用户的身份,不同用户显示不同的侧边栏,下面是配置方法:

0.需要配置的文件有:

  1. src/router
  2. src/store/modules/permission.js (没有就添加)
  3. src/store/modules/user.js
  4. src/store/index
  5. src/permission.js
  6. src/store/getters.js

1.首先修改 src/router中代码:

把需要权限的加在 asyncRoutes 里面 ,相应权限就用roles: ['admin']放不同的用户类型来控制。

constantRoutes里面放静态路由,所有人可见

具体参考下面代码:

import Vue from 'vue'
import Router from 'vue-router'
// 路由是个插件,需要use
Vue.use(Router)
// 引入layout组件,一级路由出口中,匹配layout组件
import Layout from '@/layout'// 静态路由,所有人可见
export const constantRoutes = [{path: '/login',component: () => import('@/views/login/index'),// hidden为true表示在侧边栏不显示hidden: true},{path: '/404',component: () => import('@/views/404'),hidden: true},{path: '/',component: Layout,redirect: '/dashboard',// 二级路由children: [{path: 'dashboard',name: 'Dashboard',component: () => import('@/views/dashboard/index'),meta: { title: '首页', icon: 'dashboard' }}]},// 404 page must be placed at the end !!!{ path: '*', redirect: '/404', hidden: true }
]//相应权限人员可见
export const asyncRoutes = [{path:'/patentupload',component:Layout,name:'Patentupload',meta:{ title: '专利上传', icon: 'el-icon-s-promotion',roles: ['admin'] },children: [{path: 'singleupload',name: 'Singleupload',component: () => import('@/views/patentupload/singleload'),meta: { title: '单条专利上传',roles: ['admin'] }},{path: 'multipleload',name: 'Multipleload',component: () => import('@/views/patentupload/multipleload'),meta: { title: '多条专利上传',roles: ['admin'] }},]  },{path:'/expertrate',component:Layout,name:'Expertrate',meta:{ title: '专家打分系统', icon: 'el-icon-notebook-2',roles: ['editor'] },children: [{path: 'unratedpatents',name: 'Unratedpatents',component: () => import('@/views/expertrate/unratedpatents'),meta: { title: '未打分专利',roles: ['editor'] }},{path: 'ratedpatents',name: 'Ratedpatents',component: () => import('@/views/expertrate/ratedpatents'),meta: { title: '已打分专利',roles: ['editor'] }},{path: 'rate',name: 'Rate',component: () => import('@/views/expertrate/rate'),meta: { title: '打分界面',roles: ['editor'] }},]},
]// 创建一个路由对象
const createRouter = () => new Router({// mode: 'history', // require service supportscrollBehavior: () => ({ y: 0 }),routes: constantRoutes
})const router = createRouter()// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {const newRouter = createRouter()router.matcher = newRouter.matcher // reset router
}export default router

2. src/store/modules/permission.js (没有就添加) 

generateRoutes函数来控制你设置的每个用户的判断操作,如果有超过两个的用户就继续添加ifelse。代码如下:

import { asyncRoutes, constantRoutes } from '@/router'// 筛选路由
// 匹配权限
function hasPermission( roles, route) {// 在路由上找的到 route.mate 和 route.mate.rolesif (route.meta && route.meta.roles){return roles.some(role => route.meta.roles.includes(role))}else{return true}
}// 通过递归过滤异步路由表export function filterAsyncRoutes( routes, roles){// 装筛选出来的路由const res = [] routes.forEach(route =>{const tmp = { ...route }if(hasPermission(roles, tmp)){if(tmp.children){tmp.children = filterAsyncRoutes(tmp.children, roles)}res.push(tmp)}})return res
}const state = {routes: [],addRoutes: []
}const mutations = {SET_ROUTES: (state, routes) => {state.addRoutes = routesstate.routes = constantRoutes.concat(routes) // 将过滤的路由和国定的路由存起来}
}// 筛选
const actions = {generateRoutes({ commit }, roles){return new Promise(resolve =>{let accessedRoutes// 路由是否为 admin, 有直接全部显示if(roles.includes('admin')){accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)// accessedRoutes = asyncRoutes || []console.log('走了这里1 ',accessedRoutes)console.log('asyncRoutes ',asyncRoutes)}else{// 过滤路由accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)console.log('走了这里2 ')}commit('SET_ROUTES', accessedRoutes)resolve(accessedRoutes)})}
}export default {namespaced: true,state,mutations,actions
}

3.src/store/modules/user.js 代码如下:

import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'const getDefaultState = () => {return {token: getToken(),name: '',avatar: '',roles:[], //权限设置introduction:'', // 新增}
}const state = getDefaultState()const mutations = {RESET_STATE: (state) => {Object.assign(state, getDefaultState())},SET_TOKEN: (state, token) => {state.token = token},// 新增SET_INTRODUCTION: (state, introduction) => { state.introduction = introduction},SET_NAME: (state, name) => {state.name = name},SET_AVATAR: (state, avatar) => {state.avatar = avatar},//权限设置SET_ROLES: (state, roles) => {state.roles = roles}}const actions = {// user loginlogin({ commit }, userInfo) {const { username, password } = userInfo// let result= await login({username:username.trim(),password:passwora});return new Promise((resolve, reject) => {login({ username: username.trim(), password: password }).then(response => {const { data } = responsecommit('SET_TOKEN', data.token)setToken(data.token)resolve()}).catch(error => {reject(error)})})},// get user infogetInfo({ commit, state }) {return new Promise((resolve, reject) => {getInfo(state.token).then(response => {const { data } = responseif (!data) {return reject('Verification failed, please Login again.')}// const { name, avatar } = dataconst {roles, name, avatar, introduction } = data//权限设置// 必须保证不是一个空的数组if(!roles || roles.length<=0 ){//权限设置reject('getInfo: roles must be a non-null array')//权限设置}//权限设置console.log(roles)//权限设置// 存储值commit('SET_NAME', name)commit('SET_ROLES', roles) //权限设置commit('SET_AVATAR', avatar)commit('SET_INTRODUCTION', introduction)//权限设置resolve(data)}).catch(error => {reject(error)})})},// user logoutlogout({ commit, state }) {return new Promise((resolve, reject) => {logout(state.token).then(() => {commit('SET_TOKEN', '')//权限设置commit('SET_ROLES', []) //权限设置removeToken() // must remove  token  firstresetRouter()commit('RESET_STATE')resolve()}).catch(error => {reject(error)})})},// remove tokenresetToken({ commit }) {return new Promise(resolve => {commit('SET_TOKEN', '')//权限设置commit('SET_ROLES', []) //权限设置removeToken() // must remove  token  firstcommit('RESET_STATE')resolve()})}
}export default {namespaced: true,state,mutations,actions
}

 4.src/store/index 代码如下:

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
// 权限设置
import permission from './modules/permission'Vue.use(Vuex)const store = new Vuex.Store({modules: {app,settings,user,permission // 权限设置},getters
})export default store

5.src/permission.js 代码如下:

// 引入路由器router
import router from './router'
// 引入仓库
import store from './store'
// 引入ele的提示组件
import { Message } from 'element-ui'
// 引入交互进度条
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
// 从cookie中获取token,登录了就有cookie
import { getToken } from '@/utils/auth' // get token from cookie
// 得到页面的title
import getPageTitle from '@/utils/get-page-title'// 配置nprogress
NProgress.configure({ showSpinner: false }) // NProgress Configuration// 白名单,不需要登录就能进入的路由
const whiteList = ['/login'] // no redirect whitelist// 全局前置路由守卫
router.beforeEach(async(to, from, next) => {//开启进度条NProgress.start()//给页面的title赋值document.title = getPageTitle(to.meta.title)// 从cookie中拿到token,有的话就放行,determine whether the user has logged inconst hasToken = getToken()if (hasToken) {if (to.path === '/login') {// if is logged in, redirect to the home pagenext({ path: '/' })NProgress.done()} else {// 获取用户信息// const hasGetUserInfo = store.getters.nameconst hasRoles = store.getters.roles && store.getters.roles.length > 0// 权限控制console.log('roles:',store.getters.roles)// if (hasGetUserInfo) {if (hasRoles) {console.log('执行了1')next()} else {console.log('执行了2')try {// get user info 重新获取用户信息// await store.dispatch('user/getInfo')// 权限控制const { roles } = await store.dispatch('user/getInfo')// 在角色权限基础上生成动态路由表const accessRoutes = await store.dispatch('permission/generateRoutes', roles)console.log('accessRoutes:',accessRoutes)router.options.routes = store.getters.permission_routes // 动态添加可访问路由router.addRoutes(accessRoutes)console.log('输出的store:',store)next({...to, replace: true })// next()} catch (error) {// remove token and go to login page to re-loginawait store.dispatch('user/resetToken')Message.error(error || 'Has Error')next(`/login?redirect=${to.path}`)NProgress.done()}}}} else {/* has no token*/if (whiteList.indexOf(to.path) !== -1) {// in the free login whitelist, go directlynext()} else {// other pages that do not have permission to access are redirected to the login page.next(`/login?redirect=${to.path}`)// 关闭进度条NProgress.done()}}
})// 全局后置路由守卫
router.afterEach(() => {// finish progress barNProgress.done()
})

 6.src/store/getters.js:

const getters = {sidebar: state => state.app.sidebar,device: state => state.app.device,token: state => state.user.token,avatar: state => state.user.avatar,name: state => state.user.name,// 权限设置roles: state => state.user.roles,permission_routes: state => state.permission.routes
}
export default getters

经过上面的配置,应该就可以完成权限管理了。如果有问题的话留言评论

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/793936.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

模拟---算法

1、定义 仅仅使用较简单的算法和数据结构的题目。模拟顾名思义,按照题目的要求,一步步写出代码。 特点:模拟题目通常是具有码量大、操作多、思路繁复的特点。 2、步骤 读题,读懂题目的意思,要知道题目想做什么建模,利用什么样的数据结构来实现代码实现,写出代码框架调…

maven上传pom和jar文件到远程仓库

上传.pom文件 例如只想要上传 Spring Cloud Dependencies 的 .pom 文件到 Maven 远程仓库&#xff0c;可以执行如下命令 mvn deploy:deploy-file -Durlrepository-url -DrepositoryIdrepository-id -Dfilepath-to-pom-file -DpomFilepath-to-pom-file其中&#xff0c;需要…

day04-MQ

1.初识MQ 1.1.同步和异步通讯 微服务间通讯有同步和异步两种方式&#xff1a; 同步通讯&#xff1a;就像打电话&#xff0c;需要实时响应。异步通讯&#xff1a;就像发邮件&#xff0c;不需要马上回复。 两种方式各有优劣&#xff0c;打电话可以立即得到响应&#xff0c;但是你…

LeNet卷积神经网络

文章目录 简介conv2d网络层的结构 简介 它是最早发布的卷积神经网络之一 conv2d 这个卷积成的参数先进行介绍一下&#xff1a; self.conv1 nn.Conv2d(in_channels3, out_channels10, kernel_size3, stride1, padding1)先看一下in_channels 输入的通道数&#xff0c;out_cha…

蓝桥杯备考随手记: practise06

问题描述: 一个字符串的非空子串是指字符串中长度至少为1 的连续的一段字符组成的串。 例如&#xff0c;字符串aaab 有非空子串a, b, aa, ab, aaa, aab, aaab&#xff0c;一共7 个。 注意在计算时&#xff0c;只算本质不同的串的个数。 请问&#xff0c;字符串01001100010100…

Redis从入门到精通(五)Redis实战(二)商户查询缓存

↑↑↑请在文章头部下载测试项目原代码↑↑↑ 文章目录 前言4.2 商户查询缓存4.2.1 缓存介绍4.2.2 查询商户信息的传统做法4.2.2.1 接口文档4.2.2.2 代码实现4.2.2.3 功能测试 4.2.3 查询商户信息添加Redis缓存4.2.3.1 逻辑分析4.2.3.2 代码实现4.2.3.3 功能测试 4.2.3 数据一致…

接口的总结与面试题

接口本身不能创建对象&#xff0c;只能创建接口的实现类对象&#xff0c;接口类型的变量可以与实现类对象构成多态引用。 声明接口用interface&#xff0c;接口的成员声明有限制&#xff1a; &#xff08;1&#xff09;公共的静态常量 &#xff08;2&#xff09;公共的抽象方…

【洛谷 P8656】[蓝桥杯 2017 国 B] 对局匹配 题解(映射+位集合+贪心算法)

[蓝桥杯 2017 国 B] 对局匹配 题目描述 小明喜欢在一个围棋网站上找别人在线对弈。这个网站上所有注册用户都有一个积分&#xff0c;代表他的围棋水平。 小明发现网站的自动对局系统在匹配对手时&#xff0c;只会将积分差恰好是 K K K 的两名用户匹配在一起。如果两人分差小…

Python网络爬虫(四):b站评论

首先来看一下采集的数据格式: 本文不对数据采集的过程做探讨,直接上代码。首先要在程序入口处bvids列表内替换成自己想要采集的视频bvid号,然后将self.cookies替换成自己的(需要字典格式),代码可以同时爬取多个视频的评论,且爬取的评论较为完整,亲测有效: im…

el-upload上传图片图片、el-load默认图片重新上传、el-upload初始化图片、el-upload编辑时回显图片

问题 我用el-upload上传图片&#xff0c;再上一篇文章已经解决了&#xff0c;el-upload上传图片给SpringBoot后端,但是又发现了新的问题&#xff0c;果然bug是一个个的冒出来的。新的问题是el-upload编辑时回显图片的保存。 问题描述&#xff1a;回显图片需要将默认的 file-lis…

VScode使用持续更新中。。。

VScode 安装 Ubuntu18.04安装和使用VScode 使用 Vscode如何设置成中文

基于springboot大学生兼职平台管理系统(完整源码+数据库)

一、项目简介 本项目是一套基于springboot大学生兼职平台管理系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单、功…

基于Springboot + vue + mysql 游戏分享管理系统 (含源码)

目录 &#x1f4da; 前言 &#x1f4d1;摘要 &#x1f4d1;系统架构 &#x1f4da; 系统架构设计 &#x1f4da; 数据库设计 &#x1f4ac; 管理员功能需求E/R图 &#x1f4ac; 用户功能需求E/R图 &#x1f4ac; 游戏文章E/R图 &#x1f4ac; 用户E/R图 &#x1f4da; 系…

Jmeter的使用

Jmeter的使用 1.Jmeter简介 以下内容来自Jmeter中文网http://www.jmeter.com.cn/jieshao&#xff0c;很好的解释了Jmeter的作用&#xff1a; Apache JMeter是Apache组织开发的基于Java的压力测试工具。用于对软件做压力测试&#xff0c;它最初被设计用于Web应用测试&#xf…

zabbix绑定钉钉进行通知,网页端添加JavaScript,无脑式操作

文章目录 前言一、编辑zabbix告警JavaScript脚本二、代码如下&#xff1a;编辑消息模板&#xff0c;自定义markdown格式的消息。 总结 前言 随着人工智能的不断发展&#xff0c;zabbix监控这门技术也越来越重要&#xff0c;一下进入正题。 一、编辑zabbix告警JavaScript脚本 没…

水离子雾化壁炉如何实现火焰的虚实变化?

水离子雾化壁炉通过调节水雾的密度和电子控制器的设置来实现火焰的虚实变化。具体实现方法如下&#xff1a; 调节水雾密度&#xff1a; 超声波振动器可以调节水分子的雾化效果&#xff0c;从而控制水雾的密度。增加水雾的密度会使火焰看起来更实&#xff0c;而减少水雾的密度则…

【重学C语言】四、运算符和表达式

【重学C语言】四、运算符和表达式 概念左值与右值运算符一元运算符二元运算符三元运算符 优先级结合性 基本运算符赋值运算符算术运算符复合赋值运算符位运算符应用条件和逻辑运算符条件运算符逻辑运算符逻辑短路逻辑与&#xff08;&&&#xff09;的短路行为逻辑或&…

与机器对话:ChatGPT 和 AI 语言模型的奇妙故事

原文&#xff1a;Talking to Machines: The Fascinating Story of ChatGPT and AI Language Models 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 从 ELIZA 到 ChatGPT&#xff1a;会话式人工智能的简史 会话式人工智能是人工智能&#xff08;AI&#xff09;的一个分…

vue3 ts defineProps()设置i18n无效

项目环境&#xff1a;vue3 ts element plus i18n 我想在组件中的默认值中defineProps()中设置国际化&#xff0c;本组件就是一个form表单&#xff0c;其中有查询按钮&#xff0c;及重置按钮&#xff0c;原本是写活&#xff0c;可以在调用时&#xff0c;自己设置&#xff0c…

IP地址与子网掩码

1 IP地址 1.1 IPv4与IPv6 1.2 IPv4地址详解 IPv4地址分4段&#xff0c;每段8位&#xff0c;共32位二进制数组成。 1.2.1 地址分类 这32位又被分为网络号和主机号两部分&#xff0c;根据网络号占用位数的不同&#xff0c;又可分为以下几类&#xff1a; A类地址&#xff1a;…