根据vue js中的用户角色权限将用户重定向到特定仪表板

Question

我正在开发一个用户具有多个角色权限的系统。 假设我有 3 个用户，用户 1 客户，用户 2 员工，用户 3 管理员。

我为这 3 种类型的用户提供了 3 个单独的仪表板页面。 根据用户角色，我想将用户重定向到他们的仪表板页面。 我还想用警卫来标记路线，这样如果有人未经许可想要通过手动输入 url 来转到该页面，它将重定向到 404 页面。

现在的问题是：

1. 存储用户角色权限的最佳方式是什么？ 浏览器的本地存储还是 vueX？

2. 我应该检查用户在 router.js 中的角色权限，以便将他们重定向到他们的个人仪表板吗？ 或者这个检查应该在 login.vue 组件中？

3. 在哪里设置警卫以检查用户是否有权访问路由并在未经授权的情况下重定向到 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);
       }
    }
    
})

Answer 1

我会回答我确定的问题。

问题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" });
}})