在现代前端项目中，权限控制是一个非常重要的环节。Vue Router作为Vue官方的路由管理器，为我们提供了强大的路由管理功能。在本文中，我们将探讨如何在Vue项目中使用router.beforeEach钩子函数来实现动态路由权限控制，并在用户未登录时自动重定向到登录页。
步骤一：登录并获取Token
首先，确保用户登录成功后，能够获取到token，并将token存储在Vuex或localStorage中。
// 假设登录方法
methods: {async login() {const response = await this.$http.post('/api/login', this.loginForm);const { token } = response.data;// 存储tokenthis.$store.commit('setToken', token);// 获取权限路由并动态添加this.getPermissionRoutes(token);// 登录成功后重定向到首页或其他页面this.$router.push({ path: this.$route.query.redirect || '/' });}
}
步骤二：请求后端权限路由接口
在登录方法中，或者在router.beforeEach中，如果检测到用户已经登录但没有添加权限路由，则请求后端接口获取权限路由。
// 假设的获取权限路由方法
async getPermissionRoutes(token) {const response = await this.$http.get('/api/permission_routes', {headers: {Authorization: `Bearer ${token}`}});const permissionRoutes = response.data.routes;// 动态添加路由this.addRoutes(permissionRoutes);
}
步骤三：动态添加路由
将后端返回的路由数据动态添加到路由配置中。
// 动态添加路由的方法
addRoutes(routes) {routes.forEach(route => {// 使用router.addRoute方法添加单个路由this.$router.addRoute(route);});
}
注意如果你使用的是vue2,那么你可能需要使用this.$rouer.addRoutes()
步骤四：修改router.beforeEach
在router.beforeEach中，我们需要检查是否已经添加了权限路由，如果没有，则调用获取权限路由的方法。
router.beforeEach((to, from, next) => {// 判断是否需要登录权限if (to.matched.some(record => record.meta.requiresAuth)) {// 检查token是否存在const token = store.getters.token;if (token) {// 检查是否已经添加了权限路由if (!store.getters.isPermissionRoutesAdded) {// 获取权限路由并动态添加store.dispatch('getPermissionRoutes', token).then(() => {// 设置状态，表示权限路由已添加store.commit('setPermissionRoutesAdded', true);// 继续路由跳转next({ ...to, replace: true });}).catch(() => {// 获取权限路由失败，可以重定向到登录页或其他错误处理next('/login');});} else {next();}} else {// 没有token，重定向到登录页next({path: '/login',query: { redirect: to.fullPath }});}} else {next();}
});
步骤五：在Vuex中管理状态
在Vuex中，我们需要管理权限路由是否已经添加的状态。
// Vuex store
const store = new Vuex.Store({state: {token: null,isPermissionRoutesAdded: false},mutations: {setToken(state, token) {state.token = token;},setPermissionRoutesAdded(state, value) {state.isPermissionRoutesAdded = value;}},actions: {getPermissionRoutes({ commit, state }) {// 调用上面的getPermissionRoutes方法}},getters: {token: state => state.token,isPermissionRoutesAdded: state => state.isPermissionRoutesAdded}
});
通过以上步骤，我们就可以在Vue项目中实现由后端动态提供权限路由，并在用户没有token时重定向到登录页的功能。