What is the process for dynamically altering the source file of VueRouter?

Question

What is the process for dynamically altering the source file of VueRouter?

Hello, I am working on a project that involves multiple roles using VueJs and Laravel. Laravel is used as the back-end while Vuejs serves as the front-end. The project has three different roles: User, Modirator, and Editor. Here is a snippet of my code in app.js:

// VueRouter
import VueRouter from 'vue-router';
import routes from './routes.js';
Vue.use(VueRouter);

var router = new VueRouter({
    mode: 'history',
    routes
})

Below is a sample of my routes file:

let routes = [

    // General 
    { path: '/about', component: require('./components/Home/About.vue').default },
    { path: '/pasword-change',  component: require('./components/ChangePassword.vue').default },

    // User
    { path: '/User', component: require('./components/User/Dashboard.vue').default },


    // Modirator
    { path: '/Modirator', component: require('./components/Modirator/Dashboard.vue').default },

    // Editor
    { path: '/Editor', component: require('./components/Editor/Dashboard.vue').default },


    // Error
    { path: '*', component: require('./components/Errors/404.vue').default} },

]
export default routes

I want to authenticate the user roles after login by making an AJAX request to the backend. If the role is User, it should use (routes-user.js), if it's Moderator it should use (routes-mod.js), else it should use the general routes. I aim to hide the paths like /user, /moderator, /editor from the client. After login, each role should redirect to its respective component at the root URL (/). Thank you for your assistance.

javascript laravel vue.js vuejs2 vue-router

Answer 1

Answer №1

In my recent experiment, I was able to successfully implement a solution similar to what you are looking for regarding normal component passing and lazy loading components in Vuex. The concept involved utilizing a variable named 'unauthorized' to dynamically load different components using either a javascript ternary operator or template strings.

import Vue from 'vue'
import Router from 'vue-router'
import Auth from './views/Auth.vue'
import Board from './views/Board.vue'

Vue.use(Router)

let unauthorized = true;

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/auth',
      name: 'authenticate',
      component: unauthorized ? Auth : Board
    },
    {
      path: '/',
      name: 'home',
      component: () => import(`./views/${unauthorized ? 'Auth.vue': 'Board.vue'}`)
    }
  ]
})

Detailed Explanation

Based on your specific requirements, one approach could be to store a variable ('access-type') in local storage indicating the user's role as 'moderator', 'user', or 'editor'. This variable can then be retrieved in the router.js file and leveraged with template strings to dynamically determine the component path.

If you require further assistance or clarification, feel free to reach out!

Answer 2

In my recent experiment, I was able to successfully implement a solution similar to what you are looking for regarding normal component passing and lazy loading components in Vuex. The concept involved utilizing a variable named 'unauthorized' to dynamically load different components using either a javascript ternary operator or template strings.

import Vue from 'vue'
import Router from 'vue-router'
import Auth from './views/Auth.vue'
import Board from './views/Board.vue'

Vue.use(Router)

let unauthorized = true;

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/auth',
      name: 'authenticate',
      component: unauthorized ? Auth : Board
    },
    {
      path: '/',
      name: 'home',
      component: () => import(`./views/${unauthorized ? 'Auth.vue': 'Board.vue'}`)
    }
  ]
})

Detailed Explanation

Based on your specific requirements, one approach could be to store a variable ('access-type') in local storage indicating the user's role as 'moderator', 'user', or 'editor'. This variable can then be retrieved in the router.js file and leveraged with template strings to dynamically determine the component path.

If you require further assistance or clarification, feel free to reach out!

Answer 3

Answer №2

To overcome the issue, you can attach meta data to your routes and then validate this meta data before accessing a route:

    { path: '/about', component: require('./components/Home/About.vue').default },
    { path: '/pasword-change',  component: require('./components/ChangePassword.vue').default },

    // User
    { path: '/User', component: require('./components/User/Dashboard.vue').default, meta: {authorize: ["Admin"]} },

Include the following method in your router:

router.beforeEach((to, from, next) => {
  const { authorize } = to.meta
  // Retrieve currently logged-in user (in my case it's fetched from vuex)
  const currentUser = store.getters['authentication/user']

  if (!currentUser && to.path !== '/login') {
    // If not logged in, redirect to login page with return URL
    return next({ path: '/login', query: { returnUrl: to.path } })
  }

  if (authorize) {
    // Check if route is restricted by role
    if (authorize.length && !authorize.some(r => currentUser.roles.includes(r))) {
      // Role not authorized, so redirect to home page
      return next({ path: '/' })
    }
  }

  next()
})

Answer 4

To overcome the issue, you can attach meta data to your routes and then validate this meta data before accessing a route:

    { path: '/about', component: require('./components/Home/About.vue').default },
    { path: '/pasword-change',  component: require('./components/ChangePassword.vue').default },

    // User
    { path: '/User', component: require('./components/User/Dashboard.vue').default, meta: {authorize: ["Admin"]} },

Include the following method in your router:

router.beforeEach((to, from, next) => {
  const { authorize } = to.meta
  // Retrieve currently logged-in user (in my case it's fetched from vuex)
  const currentUser = store.getters['authentication/user']

  if (!currentUser && to.path !== '/login') {
    // If not logged in, redirect to login page with return URL
    return next({ path: '/login', query: { returnUrl: to.path } })
  }

  if (authorize) {
    // Check if route is restricted by role
    if (authorize.length && !authorize.some(r => currentUser.roles.includes(r))) {
      // Role not authorized, so redirect to home page
      return next({ path: '/' })
    }
  }

  next()
})

What is the process for dynamically altering the source file of VueRouter?

Answer №1

Answer №2

Similar questions

Variable missing in the ExpressJs view

Using axios to pass parameters in a URL with the GET method on a localhost server

Activating gzip compression using fetch.js

Extract Information from a Website

How to mock nested functions within sinon

Ways to expand the border horizontally using CSS animation from the middle

Using jQuery, you can disable an option upon selection and also change its border color

Executing a function following the removal of an element

Adding HTML to a Vue instantsearch widget

A promise is given when a value triggers a function

Whenever the ajax oncomplete event is triggered, Primefaces overrides the functionality of jquery, leading to

Auto-populate AngularJS form using PHP array via JSON and $http

The $routeChangeSuccess event is failing to trigger in ngNewRouter in AngularJS version 1.4

Protractor - I am looking to optimize my IF ELSE statement for better dryness, if it is feasible

When utilizing Rx.Observable with the pausable feature, the subscribe function is not executed

Highcharts - Troubleshooting the chart reflow feature

Steps to resolve the Angular observable error

Creating a clone of JSON for use as a template

Commitments shatter amidst constructing a website

Tips for altering the entire page layout in Vuetify