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

Using an array as an argument for .map() results in an error

I am struggling to render the pages and components in React while using BrowserRouter

Creating a dynamic JSON structure from an array list of elements: A step-by-step guide

Guide on incorporating an Ajax spinner to a Slideshow

Utilizing JSON and select for dependency management

What are all the functionalities provided by jquery select?

Utilize the withCredentials property in conjunction with $resource

What is the meaning of '=>' in typescript/javascript?

The AJAX form fails to submit the information, causing PHP to not process the request

The header and sub-navigation are in disarray and require some help

Tips for navigating to a new route after a successful AJAX request

Differences between React Router's createBrowserRouter and Browser RouterWhen it

What is the proper way to retrieve the Nuxt context within the fetch() hook?

The Javascript logic on the NewForm for a Sharepoint 2013 on-premise list is failing to trigger

Load Materialize autocomplete with data from a JSON file

Is it possible for memory leaks to occur due to the use of the JavaScript setInterval

Steps for setting up single sign on in an Angular 2 application

Creating a link using curly braces {{ }} in VUE js

How did my attempt to add a length() method to Object end up breaking jQuery?

The modal disappears when the user clicks on the Previous/Next buttons of the jQuery UI datepicker