Use Vue Router to implement role-based redirection control

Use Vue Router to implement role-based redirection control

When developing web applications, we often encounter situations where access permissions need to be restricted based on user roles. Vue Router is a very convenient routing management library that can help us implement routing functions in Vue.js applications. This article will introduce how to use Vue Router to implement role-based redirection control and provide specific code examples.

First, we need to install and configure Vue Router. Vue Router can be installed via npm or yarn:

npm install vue-router

After installation, introduce Vue Router in the main Vue.js instance:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Then, we need to define the routing configuration of the application. In the routing configuration, we can specify the path, components, and required permission roles of each route.

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: true, requiredRoles: ['admin', 'user'] }
  },
  {
    path: '/admin',
    name: 'Admin',
    component: Admin,
    meta: { requiresAuth: true, requiredRoles: ['admin'] }
  },
  {
    path: '/user',
    name: 'User',
    component: User,
    meta: { requiresAuth: true, requiredRoles: ['user'] }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

In the above code, we defined four routes, namely home page (Home), administrator page (Admin), user page (User) and login page (Login). For routes that require permission control, we use the meta field to specify the required permission roles. In this example, the 'admin' role can access the administrator page, the 'user' role can access the user page, and the homepage requires permissions from both 'admin' and 'user' roles.

Next, we need to configure routing in the Vue Router instance:

const router = new VueRouter({
  routes
})

Then, we can use Vue Router’s global front guard to implement role-based redirection control. Before each route navigation, we check whether the user's role meets the roles required to access the route.

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const requiredRoles = to.meta.requiredRoles

  const currentUser = getUserFromLocalStorage()

  if (requiresAuth && !currentUser) {
    next({
      path: '/login',
      query: { redirect: to.fullPath }
    })
  } else if (requiresAuth && !requiredRoles.includes(currentUser.role)) {
    next({
      path: '/',
      query: { redirect: to.fullPath }
    })
  } else {
    next()
  }
})

function getUserFromLocalStorage() {
  // 从本地存储中获取当前用户的角色信息
  // 这里需要根据你的实际情况来实现
  // 例如从 cookie 或 sessionStorage 中获取
  return { role: 'admin' }
}

In the above code, we implement permission control through the beforeEach guard. First, we check if the user is logged in (requiresAuth) and redirect to the login page if not, passing the path of the current page as the redirect parameter (query.redirect). We then check if the user's role meets the roles required to access the route, and if the role does not meet the requirements, redirect to the homepage.

Finally, we need to mount the routing instance into the Vue.js application:

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

At this point, we have completed the process of implementing role-based redirection control using Vue Router. With the above code example, we can restrict a user's access to different pages based on their role. This enables more flexible and secure web application development.

The above is the detailed content of Use Vue Router to implement role-based redirection control. For more information, please follow other related articles on the PHP Chinese website!