How to use routing to dynamically control page permissions in Vue?

How to use routing to achieve dynamic control of page permissions in Vue?

When using Vue to develop front-end applications, it is often necessary to control page permissions, that is, some pages can only be accessed by specific users. In order to achieve dynamic control of page permissions, we can use the routing function in Vue for processing.

1. Create a routing configuration file

First, create a new file in the routing folder of the project and name it router.js. In this file, we can edit the routing configuration information. The following is an example routing configuration file:

import Vue from 'vue';
import Router from 'vue-router';

// 引入需要进行权限控制的页面组件
import HomePage from '../components/HomePage.vue';
import AdminPage from '../components/AdminPage.vue';
import UserPage from '../components/UserPage.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    // 首页
    {
      path: '/',
      name: 'HomePage',
      component: HomePage,
      meta: {
        requiresAuth: true // 需要权限验证
      }
    },
    // 管理员页面
    {
      path: '/admin',
      name: 'AdminPage',
      component: AdminPage,
      meta: {
        requiresAuth: true, // 需要权限验证
        role: 'admin' // 需要角色为admin
      }
    },
    // 普通用户页面
    {
      path: '/user',
      name: 'UserPage',
      component: UserPage,
      meta: {
        requiresAuth: true, // 需要权限验证
        role: 'user' // 需要角色为user
      }
    },
  ]
});

export default router;

In this configuration file, we first introduce Vue and router, and use Vue's use method to register the routing plug-in. Then, we defined three routes, namely the home page, the administrator page and the ordinary user page. Their access paths are '/', '/admin' and '/user' respectively. Each route has a meta field, which contains the permission information required by the route. Among them, the requiresAuth field indicates whether the route requires permission verification, and the role field indicates the role required by the route.

2. Set the global navigation guard

Next, we need to set the global navigation guard in the Vue entry file for permission verification when routing. The following is an example entry file:

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

// 设置全局导航守卫
router.beforeEach((to, from, next) => {
  // 检查该路由是否需要进行权限验证
  if (to.meta.requiresAuth) {
    const role = localStorage.getItem('role'); // 获取当前用户的角色信息
    // 检查用户的角色是否满足路由所需的角色
    if (!role || to.meta.role !== role) {
      // 如果用户的角色不满足路由所需的角色，则跳转到登录页面或无权限页面
      next('/login'); // 跳转到登录页面
    } else {
      next(); // 跳转到该路由
    }
  } else {
    next(); // 跳转到该路由
  }
});

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

In this entry file, we first introduced Vue, App component and router, and created a Vue instance. Then, we set a global navigation guard through the router.beforeEach method. In the navigation guard, we first check whether the route requires permission verification. If verification is required, obtain the role information of the current user. Then, we check whether the user's role meets the role required by the route. If not, we perform corresponding processing, such as jumping to the login page or no permission page. If the user's role meets the role required by the route, jump to the route. Finally, we create a Vue instance and pass the router into it.

3. Use routing to control page permissions

Now, we can use routing in the component to control page permissions. The following is an example component:

<template>
  <div>
    <!-- 编写组件内容 -->
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  mounted() {
    // 页面加载时自动跳转到登录页面
    this.$router.push('/login');
  },
};
</script>

In the example component, we use the this.$router.push method to implement routing jump. When the page loads, we automatically jump to the login page. Of course, you can also use other routing methods according to specific needs, such as this.$router.replace or this.$router.go, etc.

Through the above steps, we successfully implemented dynamic control of page permissions based on routing. Users can access the corresponding page only if they meet the role conditions required for routing. In this way, we can effectively protect the security of sensitive pages and ensure that only authorized users can access them.

The above is the detailed content of How to use routing to dynamically control page permissions in Vue?. For more information, please follow other related articles on the PHP Chinese website!