Vue前端更具router.js 中的meta的roles实现路由卫士，实现权限判断。-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue前端更具router.js 中的meta的roles实现路由卫士，实现权限判断。。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

参考了之篇文章

1、我在登陆时获取到登录用户的角色名roles，并存入sessionStorage中，具体是在login页面实现，还是在menu页面实现都可以。在menu页面实现，可以显得登陆快一些。
Vue前端更具router.js 中的meta的roles实现路由卫士，实现权限判断。,java开发功能实现,前端,javascript,vue.js
2、编写router.js，注意，一个用户可能有多个角色。

//以下为一个路由例子
{
	path: "/xxxx/xxxx",
	component: () => import('@/components/xxx'),
	name: "随便取个名字",
	meta: {
		roles:['角色1','角色2','角色3']
	}
}

//在路由跳转前进行判断
router.beforeEach((to,from,next) => {
    //设置直接通过的路由地址
	if(to.path === "/" || to.path === "/login" || to.path === "/menu") {
		next();
	}else {
		const tokenStr = localStorage.getItem("token")
		//如果token没有了，直接返回登录界面，即长时间没有操作。
		if (!tokenStr) {
			return next("/login");
		}else {
			//数据库中的roles以“角色1，角色2，角色3”的字符串存储，使用split分割成数组
			const roles = sessionStorage.getItem("userRole").split(",")
			//这里表示路由设置的roles中内有内容，我们没有设置权限，那么直接放行。
			if(to.meta.roles.length === 0){
				next()
			}else{
				//这里表示做循环，只要有一个满足就可以跳转了。
				for (let i = 0; i < to.meta.roles.length; i++){
				     //roles中有一个与用于的角色匹配就行
					if(roles.includes(to.meta.roles[i])){
						next()
					}
				}
			}
		}
	}