Vue Router 面试题, 项目中使用了全局权限管理,请详细描述如何通过 Vue Router 的路由守卫来实现全局权限控制?
Vue Router 面试题, 项目中使用了全局权限管理,请详细描述如何通过 Vue Router 的路由守卫来实现全局权限控制?
QA
Step 1
Q:: 如何通过 Vue Router 的路由守卫实现全局权限控制？
A:: 在 Vue 项目中，Vue Router 路由守卫可以用来实现全局权限控制。具体步骤如下：
1. 创建路由守卫：在 router/index.js 文件中定义全局路由守卫。使用 router.beforeEach 方法，在每次导航前进行权限校验。
router.beforeEach((to, from, next) => {
// 获取用户的权限信息，通常从 Vuex 或 localStorage 中获取
const userPermissions = store.state.user.permissions;
// 获取路由元信息中的权限要求
const routePermissions = to.meta.permissions;
// 判断用户是否有权限访问该路由
if (routePermissions && !userPermissions.includes(routePermissions)) {
// 如果没有权限，重定向到无权限页面或登录页面
next({ path: '/no-permission' });
} else {
// 如果有权限，继续导航
next();
}
});
2. 在路由配置中添加权限信息：在路由配置中，通过 meta 属性为每个路由添加权限信息。
const routes = [
{
path: '/admin',
component: AdminPage,
meta: { permissions: 'admin' }
},
{
path: '/user',
component: UserPage,
meta: { permissions: 'user' }
}
];
3. 权限验证逻辑：在路由守卫中，根据用户的权限信息和路由的权限要求，决定是否允许访问。
Step 2
Q:: Vue Router 的路由守卫有哪些类型？它们各自的作用是什么？
A:: Vue Router 提供了三种类型的路由守卫：全局守卫、路由独享守卫、组件内守卫。
1. 全局守卫：
- router.beforeEach：在每次导航前触发，可以用于全局的权限验证。
- router.beforeResolve：在所有组件内守卫和异步路由组件被解析之后触发。
- router.afterEach：在每次导航结束后触发，不会改变导航结果。
2. 路由独享守卫：在路由配置中定义，beforeEnter 只在进入该路由前触发。
const routes = [
{
path: '/admin',
component: AdminPage,
beforeEnter: (to, from, next) => {
// 权限验证逻辑
next();
}
}
];
3. 组件内守卫：在路由组件内定义，beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。
export default {
beforeRouteEnter (to, from, next) {
// 进入路由前
next();
},
beforeRouteUpdate (to, from, next) {
// 路由复用时
next();
},
beforeRouteLeave (to, from, next) {
// 离开路由前
next();
}
};
Step 3
Q:: 如何在 Vuex 中管理用户权限？
A:: 在 Vuex 中管理用户权限通常涉及以下步骤：
1. 定义状态：在 Vuex 中定义用户权限相关的状态。
const state = {
permissions: []
};
2. 定义 mutations 和 actions：用于修改权限状态和获取权限信息。
const mutations = {
SET_PERMISSIONS (state, permissions) {
state.permissions = permissions;
}
};
const actions = {
fetchPermissions ({ commit }) {
// 模拟获取权限信息
const permissions = ['admin', 'user'];
commit('SET_PERMISSIONS', permissions);
}
};
3. 在组件中使用：在组件中通过 mapState 和 mapActions 获取和设置权限信息。
import { mapState, mapActions } from 'vuex';
export default {
computed: {
...mapState(['permissions'])
},
methods: {
...mapActions(['fetchPermissions'])
},
created () {
this.fetchPermissions();
}
};