Vue Router 中的路由前置钩子函数( beforeEach )，路由地址校验

最新推荐文章于 2025-05-14 08:00:00 发布

原创最新推荐文章于 2025-05-14 08:00:00 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue基础知识专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种基于Vue和ElementUI的前端路由权限管理方案，通过在src目录下创建permission.js文件，利用前置路由钩子beforeEach()进行权限验证。文章详细阐述了如何检查用户登录状态及获取用户信息，确保只有已登录用户才能访问特定页面。

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

首先再src文件下创建permission.js文件
然后编写代码

/*权限校验： 通过router路由前置钩子函数 beforeEach() ， 在跳转路由前进行拦截判断是否已经登录， 如果已登录，则进行路由跳转，如果没有则回到登录页
*/
import router from './router' import {getUserInfo} from './api/login' 
/*前置路由钩子函数 to ：即将要进入的目标路由对象 from ：当前导航正要离开的路由对象 next : 调用该方法，进入目标路由
*/
router.beforeEach((to, from, next) => { 
	// 获取 token
	const token = localStorage.getItem('mgx-msm-token') 
	// 没有 token 
	if (!token) { 
		// 不允许访问其他路由, 回到登录页 
		if (to.path !== '/login') { 
			next({path: '/login'}) 
		} else { 
			next() 
		}
	} else { 
	// 有 token 
	if (to.path === '/login') { 
		// 进入目标路由 
		next() 
	} else { 
		// 有token, 看下是否有用户信息
		const userInfo = localStorage.getItem('mgx-msm-user') 
		if (userInfo) { 
			// 有信息, 进入目标路由 
			next() 
		} else { 
			// 通过token获取用户信息 													 getUserInfo(token).then((response) => {
			const resp = response.data
			console.log('prer', resp) 
			if(resp.flag) { 
				// 获取到, 保存数据 	localStorage.setItem('mgx-msm-user', JSON.stringify(resp.data)) 
				next() 
			}else { 
				// 未获取到,重新登录 
				next({path: '/login'}) 
			}
		}) 
	}
}
} })

最后将权限文件引入到全局main.js中应用

import Vue from "vue"; 
// 注意引入在 Vue的下面 
// ElementUI 组件库 
import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css'; 
import App from "./App.vue"; 
import router from "./router"; 
// 使用 ElementUI 
Vue.use(ElementUI); 

// 权限拦截 
import './permission' 

Vue.config.productionTip = process.env.NODE_ENV === 'production';
console.log(process.env.VUE_APP_SERVICE_URL) // 开发环境 development, 生产环境 production 
new Vue({ 
	router, 
	render: h => h(App) 
}).$mount("#app");