javascript - 根据vue js中的用户角色权限将用户重定向到特定仪表板
问题描述
我正在开发一个用户具有多个角色权限的系统。假设我有 3 个用户,用户 1 客户,用户 2 员工,用户 3 管理员。
我为这 3 种类型的用户提供了 3 个单独的仪表板页面。根据用户角色,我想将用户重定向到他们的仪表板页面。我还想用警卫来配置路由,这样如果有人未经许可想要通过手动输入 url 进入该页面,它将重定向到 404 页面。
现在的问题是:
存储用户角色权限的最佳方式是什么?浏览器的本地存储还是 vueX?
我应该检查用户在 router.js 中的角色权限,以便将他们重定向到他们的个人仪表板吗?或者这个检查应该在 login.vue 组件中?
在哪里设置警卫以检查用户是否有权访问路由并在未经授权的情况下重定向到 404 页面?
如果可能,请详细解释答案。我已经研究过 nuxt.js 中的 vue-router 和路由。如果有任何其他资源可以清楚地了解此问题,请在评论中分享,以便我可以清楚地理解该过程。
import { constant } from 'lodash';
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
//Vuex States
state:{
permissions:[],
},
//Getters
getters:{
authPermissions: state => state.permissions
},
//mutation
mutations:{
setPermissions: (state, fetchedData) => (state.permissions = fetchedData)
},
//mutation with actions
actions:{
async fetchAuthPermissions({ commit }){
let token = localStorage.getItem('token');
let formData = new FormData();
formData.append("token", token);
const response = await axios.post("api/userPermissions/", formData);
commit('setPermissions', response.data.permissions);
}
}
})
解决方案
我会回答我确定的问题。
问题2
您可以在登录页面中检查用户权限并重定向到相应的页面,然后将用户权限存储到 Vuex。
Login() {
axios.post('/login')
.then(({ data }) => {
this.$store.commit("SET_ PERMISSIONS", data.data.permissions);
if (data.data.user.permissions == 'customer') {
router.push({ name: "customerComponent" });
} else if (data.data.user.permissions == 'employee') {
router.push({ name: "employeeComponent" });
} else if (data.data.user.permissions == 'admin') {
router.push({ name: "adminComponent" });
}
})
.catch((error) => {
console.log(error);
});
}
问题 3
如果没有重定向到 404 页面,您可以在每个之前使用路由器来检查用户是否有权访问路由。
router.beforeEach((to, from, next) => {
//split the url
let path = to.path.split("/")[1]
//Customer
if (store.getters.permission == 'custome' && path == 'customer') {
next()
}
//employee
else if (store.getters.permission == 'employee' && path == 'employee') {
next()
}
//admin
else if (store.getters.permission == 'admin' && path == 'admin') {
next()
} else {
// redirect to 404 page here
router.push({ name: "404Component" });
}})
推荐阅读
- spring-boot - BeanCreationException:在 Spark-Submit 上创建名为“defaultValidator”的 bean 时出错
- qgis - 在 QGIS 中选择特征
- angular - 使用嵌套出口路由到嵌套页面/组件不起作用
- c++ - 在使用结构 C++ 的集合中查找元素
- sas - 如何从 SAS 获取重复值?
- selenium - Selenium - 无头 ChromeOptions 忽略 While 循环?
- javascript - 将变量绑定到角度 2 中的段落标签
- javascript - Javascript:异步函数后退出脚本
- php - Laravel 多重身份验证错误与条件
- spring - Autowring 数据源和 jdbcTemplate 返回 NullPointerException