Redirect user to specific dashboard based on user-role-permission in vue js

user_14216560 0
Viewed 1623

I'm working on a system where user has multiple role-permissions. Suppose I've 3 users, User1 customer, User2 employee, User3 admin.

I've 3 sperate dashboard page for these 3 types of users. Based on user role I want to redirect the users to their dashboard page. I also want to peoject the route with guard so that if someone without permission wants to goto the page by manually typing the url, it will redirect to an 404 page.

Now the questions are :

  1. What is the best way to store the user's role-permissions? Browser's local storage or vueX?

  2. Shall I check the user's role-permissions in router.js in order to redirect them to their individual dashboard? Or this check should be in login.vue component?

  3. Where to set the guards to check if user has permission to access the route and redirect to 404 page if unauthorised?

Please expain the answers in details if possible. I've already studied vue-router and routing in nuxt.js. If there is any other resources to get a clear picture about this issue please share in comment so that I can understand the process clearly.

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);
       }
    }
    
})
nuxt.js vue.js authentication javascript
1 Answers

I'll answer the questions that I am sure of.

Question 2

You can check the user permissions in the login page the redirect to the appropriate page then store the user permissions to 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);
        });
    }

Question 3

You can use router before each to check if user has permission to access a route if not redirect to 404 page.

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" });
}})
user_116140430
Related