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

本文介绍了一种基于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");
### Vue Router 钩子函数概述 Vue RouterVue.js 的官方路由管理器,用于构建单页面应用(SPA),其中钩子函数(也称为导航守卫)是非常重要的功能之一。它们允许开发者在导航过程中执行自定义逻辑,比如权限校验、数据预取等。 以下是 Vue Router 中常见的几种类型的钩子函数以及其使用方法: --- #### 1. **全局前置守卫 (`beforeEach`)** 该钩子会在每次路由跳转触发,适用于整个应用程序范围的拦截操作,例如登录状态验证。 ```javascript router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated()) { next('/login'); // 如果未认证,则重定向到登录页 } else { next(); // 否则继续导航 } }); ``` 此代码片段展示了如何通过 `meta` 字段判断目标路由是否需要身份验证[^1]。 --- #### 2. **全局解析守卫 (`beforeResolve`)** 类似于 `beforeEach`,但它是在导航被确认之后,但在组件渲染之调用。适合处理依赖于异步数据获取的情况。 ```javascript router.beforeResolve((to, from, next) => { const asyncDataLoaded = loadAsyncData(to.params.id); if (!asyncDataLoaded) { next(false); // 停止导航直到数据加载完成 } else { next(); } }); ``` 上述例子说明了当某些条件不满足时暂停导航的过程[^5]。 --- #### 3. **全局后置钩子 (`afterEach`)** 这个钩子不会接收 `next` 函数也不会改变导航本身,主要用于记录日志或者更改页面标题之类的副作用操作。 ```javascript router.afterEach((to, from) => { document.title = to.meta.title || 'Default Title'; }); ``` 这里演示了一个简单的设置网页标题的例子[^2]。 --- #### 4. **路由独享守卫 (`beforeEnter`)** 针对某个具体的路由配置单独使用的守卫,通常用来简化复杂的业务逻辑分配。 ```javascript const routes = [ { path: '/admin', component: Admin, beforeEnter: (to, from, next) => { isAdmin() ? next() : next('/'); }, }, ]; ``` 上面这段脚本检查用户是否有管理员权限再决定是否进入指定路径[^3]。 --- #### 5. **组件内的守卫** ##### a. `beforeRouteEnter` 特殊之处在于无法直接访问当组件实例(`this`),但是可以通过传递回调给 `next` 来间接获得。 ```javascript export default { beforeRouteEnter(to, from, next) { next(vm => { console.log('Component instance:', vm); }); }, }; ``` 注意这里的 `vm` 参数代表的就是即将挂载好的组件实例对象[^4]。 ##### b. `beforeRouteUpdate` 仅限于同一个组件重新渲染期间有效,即 params 或 query 发生变化但保持同一组件不变的情况下适用。 ```javascript export default { data() { return { msg: '' }; }, beforeRouteUpdate(to, from, next) { this.msg = to.params.message; next(); }, }; ``` 此处更新消息变量以反映新的路由参数值。 ##### c. `beforeRouteLeave` 离开当视图运行,可用于提示保存工作进度或其他清理动作。 ```javascript export default { beforeRouteLeave(to, from, next) { const answer = window.confirm('Do you really want to leave?'); if (answer) { next(); } else { next(false); } }, }; ``` 以上示例询问用户是否真的要退出当界面。 --- ### 总结 Vue Router 提供多种方式让开发者能够精确控制用户的浏览行为,无论是整体性的还是局部特化的场景都能找到合适的解决方案。合理运用这些钩子不仅可以增强用户体验还能提高程序的安全性和稳定性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值