Currently, I am developing a system that involves handling multiple role-permissions for users. To provide some context, there are 3 distinct users in this scenario: User1 (customer), User2 (employee), and User3 (admin).
For each of these user types, I have created separate dashboard pages. The goal is to automatically redirect users to their respective dashboard based on their assigned role. Additionally, I want to implement route guards to prevent unauthorized access. If an individual attempts to manually navigate to a specific page by typing the URL without permission, they should be redirected to a 404 error page.
Here are some questions that I have regarding the implementation:
What would be the most effective way to store user role-permissions? Should I utilize the browser's local storage or opt for vuex?
Is it advisable to verify the user's role-permissions within the router.js file to facilitate redirection to the appropriate dashboard? Alternatively, should this validation process take place within the login.vue component?
Where should the guards be set up to ascertain whether a user possesses the necessary authorization to access a particular route and handle the redirection to the 404 error page for unauthorized users?
If possible, please provide detailed explanations for your answers. While I have already familiarized myself with vue-router and routing in nuxt.js, I welcome any additional resources or insights that could offer further clarity on this matter. Feel free to share such recommendations in the comments section for my reference.
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);
}
}
})