Vue全局前置守卫实现页面权限验证-CSDN博客

本文链接：https://blog.csdn.net/weixin_45425587/article/details/115328711

本文探讨了在Vue应用中如何处理用户登录后直接通过路径访问无权限页面的问题。提出通过全局前置守卫在路由跳转前进行权限判断，详细说明了在用户登录时存储权限数据到本地，并在路由器模块中进行权限验证的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：用户登录后可以通过路径访问没有权限的页面

分析：在哪里进行判断用户是否有权限前往指定页面，在路由前往页面之前，通过全局前置守卫来实现

// 全局前置守卫
router.beforeEach((to,from,next)=>{
	
	// 获取本地存储token
	let token = window.sessionStorage.getItem("token")
	// 判断token是否为真
	if(token){
		// 已登录	
		// 请不要重复登录
		if(to.path === "/login"){
			// 返回from
			return next({name:from.name?from.name:'index'})
			}
			// 权限限制验证
			next()
	}else{
		// 未登录
		if(to.path === "/login"){
			return next()
		}
		Vue.prototype.$message("请先登录")
		next({name:"login"})
	}

获取用户权限规则
在用户登录时，将以登录用户的权限数据存储到本地（login//index.vue）

// 存储权限菜单规则
if(data.role && data.role.rules){
	window.sessionStorage.setItem("rules",JSON.stringify(data.role.rules))
	}

在路由器模块中进行判断，判断用户是否已在error_404路径下的页面中，如果在，则前往，如果不在则验证

if(to.name !== "error_404"){
  // 此处进行验证
}

获取本地存储权限规则

if(to.name !== "error_404"){
	// 获取权限规则数据
	let rules = []window.sessionStorage.getItem("rules")
	//判断rules是否存在，如果存在，转换为js对象格式，不存在，则设置为空数组
	rules = rules?JSON.parse(rules):[]
	}

如果rule_id为0则为顶部菜单，不为0则为左侧菜单，判断如果rule_id大于0 并且前往的页面 to.name 等于本地存储权限规则的路径 item.desc 则返回指定元素的索引 否则返回-1

if(to.name !== "error_404"){
// 获取权限规则数据
	let rules = []window.sessionStorage.getItem("rules")
	rules = rules?JSON.parse(rules):[]
			
	let index = rules.findIndex(item=>{
		return item.rule_id>0 && to.name === item.desc
	})
	//如果index === -1 则返回原页面,r如果原页面不存在则前往404页面
	if(index === -1){
		return next({name:from.name?from.name:"error_404"})
	}
}