vue中实现路由鉴权和不同用户登录

路由鉴权

路由鉴权是指根据用户权限控制用户可以访问哪些路由。

Vue 中实现路由鉴权

Vue 中可以结合 Vuex 和路由守卫来实现路由鉴权。

1. 使用 Vuex 存储用户权限

• 创建一个 Vuex store 来存储用户权限。
• 在登录成功后，将用户权限存储在 Vuex store 中。
• 在路由守卫中检查用户权限。

2. 使用路由守卫

• 使用 beforeEach 钩子函数来检查用户权限。
• 如果用户没有权限访问该路由，则重定向到其他路由。

示例

JavaScript

// Vuex storeconst store = new Vuex.Store({state: {user: {permissions: []}},mutations: {setUserPermissions(state, permissions) {state.user.permissions = permissions;}}
});// 路由守卫router.beforeEach((to, from, next) => {const requiredPermissions = to.meta.permissions;const userPermissions = store.state.user.permissions;if (!requiredPermissions || requiredPermissions.length === 0) {next();return;}if (userPermissions.some(permission => requiredPermissions.includes(permission))) {next();} else {next('/login');}
});

不同用户登录

1. 使用不同的登录页面

• 为不同的用户类型创建不同的登录页面。
• 在登录页面收集用户身份信息。
• 登录成功后，将用户身份信息存储在本地存储或 cookie 中。

2. 使用不同的 API 接口

• 为不同的用户类型提供不同的 API 接口。
• 在登录成功后，根据用户身份信息选择要调用的 API 接口。

示例

JavaScript

// 登录页面<template><div><input type="text" v-model="username" /><input type="password" v-model="password" /><button @click="login">登录</button></div>
</template><script>
export default {data() {return {username: '',password: ''};},methods: {login() {const { username, password } = this;if (username === 'admin' && password === 'admin') {// 登录成功，将用户身份信息存储在本地存储中localStorage.setItem('userType', 'admin');this.$router.push('/home');} else {// 登录失败alert('登录失败');}}}
};
</script>// API 接口// 普通用户
const api = {getUser() {// ...}
};// 管理员
const adminApi = {getUser() {// ...},deleteUser() {// ...}
};// 在登录成功后，根据用户身份信息选择要调用的 API 接口const user = JSON.parse(localStorage.getItem('user'));if (user.type === 'admin') {// 使用管理员 API 接口adminApi.getUser();
} else {// 使用普通用户 API 接口api.getUser();
}

总结

• Vue 中可以结合 Vuex 和路由守卫来实现路由鉴权。
• 可以使用不同的登录页面和 API 接口来实现不同用户登录。