路由鑒權(quán)

路由鑒權(quán)是指根據(jù)用戶權(quán)限控制用戶可以訪問哪些路由。

Vue 中實現(xiàn)路由鑒權(quán)

Vue 中可以結(jié)合 Vuex 和路由守衛(wèi)來實現(xiàn)路由鑒權(quán)。

1. 使用 Vuex 存儲用戶權(quán)限

• 創(chuàng)建一個 Vuex store 來存儲用戶權(quán)限。
• 在登錄成功后，將用戶權(quán)限存儲在 Vuex store 中。
• 在路由守衛(wèi)中檢查用戶權(quán)限。

2. 使用路由守衛(wèi)

• 使用?beforeEach?鉤子函數(shù)來檢查用戶權(quán)限。
• 如果用戶沒有權(quán)限訪問該路由，則重定向到其他路由。

示例

JavaScript

// Vuex storeconst store = new Vuex.Store({state: {user: {permissions: []}},mutations: {setUserPermissions(state, permissions) {state.user.permissions = permissions;}}
});// 路由守衛(wèi)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. 使用不同的登錄頁面

• 為不同的用戶類型創(chuàng)建不同的登錄頁面。
• 在登錄頁面收集用戶身份信息。
• 登錄成功后，將用戶身份信息存儲在本地存儲或 cookie 中。

2. 使用不同的 API 接口

• 為不同的用戶類型提供不同的 API 接口。
• 在登錄成功后，根據(jù)用戶身份信息選擇要調(diào)用的 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') {// 登錄成功，將用戶身份信息存儲在本地存儲中l(wèi)ocalStorage.setItem('userType', 'admin');this.$router.push('/home');} else {// 登錄失敗alert('登錄失敗');}}}
};
</script>// API 接口// 普通用戶
const api = {getUser() {// ...}
};// 管理員
const adminApi = {getUser() {// ...},deleteUser() {// ...}
};// 在登錄成功后，根據(jù)用戶身份信息選擇要調(diào)用的 API 接口const user = JSON.parse(localStorage.getItem('user'));if (user.type === 'admin') {// 使用管理員 API 接口adminApi.getUser();
} else {// 使用普通用戶 API 接口api.getUser();
}

總結(jié)

• Vue 中可以結(jié)合 Vuex 和路由守衛(wèi)來實現(xiàn)路由鑒權(quán)。
• 可以使用不同的登錄頁面和 API 接口來實現(xiàn)不同用戶登錄。

?

?