vue权限设置

最新推荐文章于 2024-03-21 18:28:20 发布
最新推荐文章于 2024-03-21 18:28:20 发布
阅读量536 收藏 1
点赞数 1
分类专栏： vue 配置权限
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42928070/article/details/108005534
版权

由于addRoutes无法清除，因此每次重置权限时候需刷新页面即：退出时刷新页面

1.由于多人合作，路由嵌套规则不一样

路由表：router/index.js
export default new VueRouter({
	routes: [{
			path: '/login',
			name: 'Login',
			component: () => import('@/views/Login.vue'),
			meta: {
				keepAlive: false,
				needLogin: false // 需要登录
			}
		},
// 		{
// 			path: '/',
// 			name: 'HomePage',
// 			component: () => import('@/views/HomePage.vue'),
// 			meta: {
// 				keepAlive: false, // 不需要被缓存
// 				needLogin: true // 需要登录
// 			},
// 			children: [{
// 					path: '/',
// 					redirect: '/homePage'
// 				},
// 				{
// 					path: '/homePage',
// 					name: 'homePage',
// 					component: homePage,
// 					meta: {
// 						keepAlive: false, // 不需要被缓存
// 						needLogin: true // 需要登录
// 					}
// 				},
// 				{
// 					path: '/gis',
// 					name: 'GIS',
// 					component: () => import('@/contents/gis/gis.vue'),
// 					meta: {
// 						keepAlive: false, // 不需要被缓存
// 						needLogin: true // 需要登录
// 					},
// 				},
// 				{
// 					path: '/thematic',
// 					name: 'Thematic',
// 					component: () => import('@/contents/thematic/ThematicMap'),
// 					meta: {
// 						keepAlive: false, // 不需要被缓存
// 						needLogin: true // 需要登录
// 					},
// 				},
// 				{//低压数据维护
// 					path: '/datamaintain',
// 					name: 'DataMaintain',
// 					component: () => import('@/contents/data/DataMaintain'),
// 					meta: {
// 						keepAlive: false, // 不需要被缓存
// 						needLogin: true // 需要登录
// 					},
// 				},
// 				{
// 					path: '/defect',
// 					name: 'DefectList',
// 					component: () => import('@/contents/defectManage/defectList.vue'),
// 					meta: {
// 						keepAlive: false, // 不需要被缓存
// 						needLogin: true // 需要登录
// 					},
// 				},
// 				{
// 					path: '/defectdetail',
// 					name: 'DefectDetail',
// 					component: () => import('@/contents/defectManage/DefectDetail.vue'),
// 					meta: {
// 						keepAlive: false, // 不需要被缓存
// 						needLogin: true // 需要登录
// 					},
// 
// 				},
// 				{ //台账管理
// 					path: '/ledger',
// 					name: 'Ledger',
// 					component: FatherView,
// 					meta: {
// 						keepAlive: false, // 不需要被缓存
// 						needLogin: true // 需要登录
// 					},
// 					children: [
// 						{
// 							path: 'equip',
// 							name: 'EquipLedger',
// 							component: FatherView,
// 							children: [{
// 									path: '/',
// 									name: 'EquipLedgerList',
// 									component: EquipLedger,
// 									meta: {
// 										keepAlive: false, // 不需要被缓存
// 										needLogin: true // 需要登录
// 									}
// 								},
// 								{
// 									path: 'equipDetail',
// 									name: 'EquipLedgerDetail',
// 									component: EquipDetail,
// 									meta: {
// 										keepAlive: false, // 不需要被缓存
// 										needLogin: true // 需要登录
// 									}
// 								}
// 							]
// 						},
// 						{
// 							path: 'user',
// 							name: 'UserLedger',
// 							component: UserLedger,
// 							meta: {
// 								keepAlive: false, // 不需要被缓存
// 								needLogin: true // 需要登录
// 							}
// 						},
// 						{
// 							path: 'maintain',
// 							name: 'accountMaintain',
// 							component: accountMaintain,
// 							meta: {
// 								keepAlive: false, // 不需要被缓存
// 								needLogin: true // 需要登录
// 							}
// 						}
// 					]
// 				},
// 				{ //档案管理
// 					path: '/dossier',
// 					name: 'DossierManage',
// 					component: FatherView,
// 					children: [{
// 							path: '/dossier',
// 							name: 'Dossier',
// 							component: Dossier,
// 							meta: {
// 								keepAlive: false, // 不需要被缓存
// 								needLogin: true // 需要登录
// 							}
// 						},
// 						{
// 							path: 'detail',
// 							name: 'DossierDetail',
// 							component: DossierDetail,
// 							meta: {
// 								keepAlive: false, // 不需要被缓存
// 								needLogin: true // 需要登录
// 							},
// 						}
// 					],
// 					meta: {
// 						keepAlive: false, // 不需要被缓存
// 						needLogin: true // 需要登录
// 					},
// 				}
// 			]
// 		},
// 		{
// 			path: '/system',
// 			name: 'System',
// 			component: System,
// 			children: [{
// 				path: '',
// 				redirect: 'user'
// 			}, {
// 				path: 'user',
// 				name: 'UserManage',
// 				component: UserManage,
// 				meta: {
// 					keepAlive: false, // 不需要被缓存
// 					needLogin: true // 需要登录
// 				}
// 			}, {
// 				path: 'role',
// 				name: 'RoleManage',
// 				component: RoleManage,
// 				meta: {
// 					keepAlive: false, // 不需要被缓存
// 					needLogin: true // 需要登录
// 				}
// 			}, {
// 				path: 'organ',
// 				name: 'Organization',
// 				component: Organization,
// 				meta: {
// 					keepAlive: false, // 不需要被缓存
// 					needLogin: true // 需要登录
// 				}
// 			}, {
// 				path: 'privile',
// 				name: 'Privilege',
// 				component: Privilege,
// 				meta: {
// 					keepAlive: false, // 不需要被缓存
// 					needLogin: true // 需要登录
// 				}
// 			}, {
// 				path: 'log',
// 				name: 'LogManage',
// 				component: LogManage,
// 				meta: {
// 					keepAlive: false, // 不需要被缓存
// 					needLogin: true // 需要登录
// 				}
// 			}]
// 		}
	]
})

2.后台获取数据添加路由
utils/util.js自定义脚本文件

export const initMenu = (router,store) => {
	return new Promise((resolve,reject)=>{
		let menuRoutes = JSON.parse(localStorage.getItem('user'))[4].children;
		let routesArr = []
		//两个模块遍历调用重置字段方法
		menuRoutes.map(menu=>{
			let initRoutes = formatRoutes(menu)
			let obj = {
				name:menu.name_y,
				path:menu.menuURL,
				children:initRoutes,
				component:findComponents(menu.name_y),
				meta:{
					hidden:menu.hidden,
					keepAlive:menu.keepAlive,
					name:menu.catalogName,
					needLogin:true,
					hidden:menu.hidden
				}
			}
			routesArr.push(obj)
		})
		console.log("触发initMenu",routesArr);
		// 添加无权限路由以及重定向路由
		routesArr[0].children.push({
			path: 'nopromiss',
			name: 'NoPromission',
			component(resolve) {
				require(['@/contents/Promission'], resolve)
			}
		})
		routesArr.map(routes=>{
			routes.children.push({
				path: '',
				redirect: routes.children[0].path
			})
		})
		// 通过addRoutes添加路由
		router.addRoutes(routesArr);
		//store存储路由判断刷新页面
		store.commit('INITROUTE', routesArr)
		resolve(router);
	})
}

//递归添加路由

/**
*@para(Object):initRoutes
*initRoutes示例：
{
	catalogId: "4fa36fd09438420cb2ff68ca7179da41"
	catalogName: "首页"
	children: [//子路由同此示例]
	hasChildren: true
	hidden: false
	hidden_code: "0"
	keepAlive: false
	keepAlive_code: "0"
	menuType: "2"
	menuURL: "/"
	name_y: "HomePage"
	parentId: "root"
}
*/
const formatRoutes = (initRoutes) => {
	
	let fmRoutes1 = [];
	if(initRoutes.hasChildren){
		initRoutes.children.map(childRoute=>{
			let obj = {
				name:childRoute.name_y,
				path:childRoute.menuURL,
				component:findComponents(childRoute.name_y),
				children:[],
				meta:{
					hidden:childRoute.hidden,
					keepAlive:childRoute.keepAlive,
					name:childRoute.catalogName,
					needLogin:true,
					hidden:childRoute.hidden
				}
			}
			//递归添加路由
			let fmRoutes2 = formatRoutes(childRoute)
			obj.children = fmRoutes2
			fmRoutes1.push(obj)
		})
		
	}
	return fmRoutes1
}


//判断路由名并匹配组件
const findComponents = (compName) => {
	// component(resolve){
		let component = null
		if (compName === 'HomePage') {
			return component = (resolve) => require(['@/views/HomePage.vue'], resolve)
			
		}
		else if (compName === 'homePage') {
			return component = (resolve) => require(['@/contents/homePage/homePage'], resolve)
			
		}else if(compName === 'GIS'){
			return component = (resolve) => require(['@/contents/gis/gis.vue'], resolve)
			
		}
}

3.main.js配置路由守卫

//判断是否是刷新页面
if(store.state.routes.length>0){
		if(to.meta.needLogin){//需要登录
			if(session&&userinform!="未登录"){
				if(to.meta.hidden){
					next({
						name: 'NoPromission'
					})
				}else{
					next()
				}
			}else{
				next({
					name: 'Login'
				})
			}
		}else{//不需要登录
			next()
		}
	}
	else{//如果刷新页面重新添加路由
		if (JSON.parse(localStorage.getItem('user'))) {
			initMenu(router, store).then((router) => {
				next({
					path: to.path
				})
				return
			})
		} else {
			if (to.name == 'Login') {
				next()
				return
			} 
			else {
				next({
					name: 'Login'
				})
			}
		}
	}

4.login.vue+store.js(vuex)登录时获取路由权限路由并存储

this.$store.commit("LOGIN", res.data);
//store.js
LOGIN(state, user) {
	state.user = user;
	state.userinform = user[2]
	window.localStorage.setItem('user', JSON.stringify(user));
	// state.userinform
},

5.退出时删除用户信息并通过刷新清空添加的路由表

Logout(){
	this.$router.push({
		name:'Login'
	}).then(()=>{
		this.$store.dispatch('deleteUserInform').then(()=>{
			location.reload()
		})
		
	})
}
//store.js
//mutations
LOGOUT(state) {
	window.localStorage.removeItem('user');
	state.routes = [];
	state.userinform = '未登录'
},
//actions
deleteUserInform(context) {
	return new Promise((resolve, reject) => {
		context.commit('LOGOUT')
		resolve()
	})
}
沐风系大佬
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue权限管理
12-25
vue权限管理，vue实战，vue学习，vue页面权限控制，vue项目实战
vue2.x项目从0到1（六）之权限校验文件
notagoodwriter的博客
02-13 197
vue权限校验文件
vue项目搭建注意要点（关闭校验、设置浏览器自动打开、路径简写@方式）
qq_51196135的博客
01-26 1083
1、项目目录说明 2、项目的其他配置 2.1 项目运行起来的时候，浏览器自动打开 ------package.json 文件中（加--open）： "scripts": { "serve": "vue-cli-service serve --open", //加了 --open "build": "vue-cli-service build", "lint": "vue-cli-service lint", "test:unit": "vue-...
Springboot+vue项目，利用Vue路由守卫实现权限控制，实现域名游客登录和对于用户权限的控制
最新发布
weixin_53955862的博客
03-21 1308
为了确保应用的安全性，我们还应该在后端实施相应的权限控制措施。游客用户是没有存储任何用户信息的用户，因此在路由守卫中，我们应该首先识别并处理这类用户，以确保其他路由跳转逻辑不会影响到他们。游客用户是没有存储任何用户信息的用户，因此在路由守卫中，我们应该首先识别并处理这类用户，以确保其他路由跳转逻辑不会影响到他们。通过这样的设置，我们可以规范登录地址，并根据不同的路径前缀来判断用户角色，从而实现基本的权限控制。通过这样的设置，我们可以规范登录地址，并根据不同的路径前缀来判断用户角色，从而实现基本的权限控制。
手把手教你关于vue项目后台管理程序前端如何配置权限问题
Miss_hhl的博客
05-13 1013
做后台管理程序关于安全性和权限问题是重中之重的，不同的角色对于不同的权限，不同权限对于不同的路由，同时侧边栏也是根据路由配置异步生成。 一、登录 用户进行登录，我们要做的就是对登入角色进行判断（根据具体的业务需要进行角色的划分）。 二、权限验证 当我们拿到当前用户登录的信息之后，我们需要根据信息来处理当前用户有哪一些权限（这一步是关键也是最容易死循环的操作） 1、前期的准备工作 我们需要编写一份映射表，关于这个项目所对应的动态路由映射表和静态路由映射表。比如： export const asyncMap=[
vue 后台管理登录权限不同，不同的导航菜单
qq_40685103的博客
04-08 9209
后台管理不同的权限登录，后台的导航栏显示不同菜单 1.router.js 路由页面的配置 首先路由页面分两块，一块是默认的路由，无论用户的权限是什么，都会访问到的页面，也叫公共路由 另一块是需要用户权限才能查看的某些特定的页面 import Vue from 'vue' import Router from 'vue-router' const login=()=>import('@/co...
vue配置网页授权登录第一步，配置授权地址
胖达的博客
05-31 3301
微信网页授权文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842 微信网页授权分4步： 这里只讲第一步，就是如何配置授权地址 第一步：用户同意授权，获取code 在确保微信公众账号拥有授权作用域（scope参数）的权限的前提下（服务号获得高级接口后，默认拥有scope参数中的snsapi_ba...
vue与shiro结合实现权限按钮
12-15
vue+shiro实现前端细颗粒按钮级权限，并且可以实现删除和禁用两种不同模式，里面需要的前置技术包括 ：vue\vue的自定义指令\vue的自定义插件\vuex
vue 设置路由的登录权限的方法
08-27
主要介绍了vue 设置路由的登录权限的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue权限控制.pdf
07-19
Vue权限控制.pdf
前端VUE权限管理（包含菜单权限和按钮权限），router.addRoutes根据后台接口传递数据生成动态路由
08-15
VUE-router.addRoutes根据后台接口传递数据生成动态路由，前端拿到配置并生成侧边栏-实现页面级权限控制。 ----------------------------------------------- 登陆成功之后直接由后端返回异步路由表，然后前端直接...
Vue2.0用户权限控制解决方案
11-07
Vue2.0用户权限控制解决方案 用addRoutes实现动态路由 可按要求显示对应的
Vue权限控制管理
qq_31066285的博客
11-15 7863
一、权限相关概念 1.1 权限的分类 后端权限 ​ 从根不上讲前端仅仅只是视图层的展示， 权限的核心是在于服务器中的数据变，所以后端才是权限的关键，后端权限可以控制某个用户是否能够查询数据， 是否能够修改数据等操作。 1.后端如何知道该请求是哪个用户发过来的 ​ cookie ​ session ​ token 2.后端的权限设计RBAC（后面再了解） ​ 用户 ​ 角色 ​ 权限 前端权限 前端权限的控制本质上来说，就是控制端的视图层的展示和前端所发送的请求。但是只有前端权限控
【面试题】面试官： Vue如何实现权限管理？
web全栈开发的博客
09-28 7883
根据具体的项目的方案，选择合适的方案，权限判断需要前后端一起判断。
Vue权限控制
csdssdn的博客
08-08 7155
中我们可以根据后端返回的数据。
路由配置及动态路由---vue-router
lotte
04-21 879
import routeMap from './router/component.js'; const NotFound = () => import('./page/404.vue'); const formatRoutes = function (routes, routeData) { if (!routeData) { routeData = { name:...
vue前端权限控制方案详解附demo
feiyu_may的博客
07-06 5327
Vue+Element-ui技术栈 demo源码：https://github.com/Lindsayyyy/vue-permission 演示地址：http://auth.qywyyztp.top 目录 1、概述 1.1 粗粒度与细粒度 1.2 控制哪些 2、路由控制 2.1 初始化挂载登录以及无需权限的公共页面。 2.2 用户登录成功获取role，获取...
Vue权限
lastone1212的博客
07-21 1452
取得后端返回的菜单后，根据菜单与路由的对应关系，筛选出可访问的路由，通过addRoutes动态挂载。每次路由跳转的时候都要判断权限，这里的判断也很简单，因为菜单的name与路由的name是一一对应的，而后端返回的菜单就已经是经过权限过滤的。菜单跟路由耦合在一起，定义路由的时候还有添加菜单显示标题，图标之类的信息，而且路由不一定作为菜单显示，还要多加字段进行标识。登录后，获取用户的权限信息，然后筛选有权限访问的路由，在全局路由守卫里进行调用addRoutes添加路由。全局路由守卫里，每次路由跳转都要做判断。.
vue自定义权限标签
热门推荐
succeedcow的博客
10-05 1万+
vue vuex 自定义权限标签
vue登录页面权限设置
09-06
在Eclipse中创建登录页面的代码如下所示： ``` ; charset=UTF-8" pageEncoding="UTF-8"%> <!... <title>Login ...<input type="text" id="username" name="username"><br> ...<title>Registration Successful</title>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值