Detailed explanation of how vue implements routing permission control

Vue is one of the most popular front-end frameworks at the moment. Compared with the traditional page rendering method, Vue pays more attention to the management of front-end routing. In actual projects, the access permissions of front-end routing are also a very important issue. So, how to implement routing permission control in Vue?

In Vue, there are two main ways to implement routing permission control: one is to control it on the front end, that is, dynamically generate routing tables according to different user permissions; the other is to control it through the back end The interface is controlled, that is, the front end initiates a request to the back end and generates the corresponding routing table based on the returned permission information.

1. Front-end control method

In the front-end control method, we can implement routing permission control through the following steps:

1.1 In routing configuration Configuration in the file

In Vue, we usually create an index.js file under the router folder, in which various routing information will be configured. When performing routing permission control, we can configure the meta information of the routing in this file to store the routing permission information.

For example, we can define a route that needs to control access based on user permissions:

{
  path: '/admin',
  name: 'admin',
  component: () => import('@/views/Admin.vue'),
  meta: { requiresAuth: true }
},

In this routing configuration, we define a route named requiresAuth metaAttribute, used to mark this as a route that requires control permissions.

1.2 Control in the routing interceptor

An interceptor is actually a piece of code that is used to intercept requests and perform specified operations under certain specific circumstances. In Vue, we can use the beforeEach method to intercept routing requests and perform permission control.

For example, we can define a beforeEach method like this:

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters.isLoggedIn) {
      next({ path: '/login' });
    } else {
      next();
    }
  } else {
    next();
  }
});

In this interceptor, we judge the route that currently needs to be accessed and the previously defined meta attribute to determine whether permission control is required. If necessary, we will perform access control based on the user's login status and other information, and jump to the specified page when necessary.

2. Backend control method

In the backend control method, we need to get the returned user permission information by sending a request to the backend, and then generate the routing table Carry out corresponding control when necessary.

For example, if a JWT-based backend returns /admin, this route requires administrator permissions to access. We can obtain the user's permission information like this:

const response = await axios.get('/user');
const permissions = response.data.permissions;

After obtaining the user's permission information, we can use Vue Router's dynamic route generation and other functions to dynamically generate the routing table.

For example, we can define a function that dynamically generates a routing table like this:

function generateRoutesFromMenu (menu = [], permissions = {}) {
  const routes = []

  for (let i = 0, l = menu.length; i < l; i++) {
    const item = menu[i]
    const route = {
      path: item.path,
      name: item.name,
      meta: item.meta, // 从菜单项中提取出路由的meta信息
      component: item.component ? loadView(item.component) : null,
      children: item.children ? generateRoutesFromMenu(item.children, permissions) : []
    }

    // 如果路由需要控制权限
    if (route.meta && route.meta.requiresAuth) {
      // 判断用户是否有权限访问该路由
      if (permissions[route.meta.permissionKey]) {
        // 用户有权限，则把该路由加入到路由表中
        routes.push(route)
      }
    } else {
      // 如果不需要权限控制，则直接加入到路由表中
      routes.push(route)
    }
  }

  return routes
}

In this function, we can see that we define the meta## in the menu item #Attributes to mark which routes require permission control. When generating the routing table, we determine whether these routes need to be added to the routing table based on the user's permission information. If permission control is not required, we can directly add it to the routing table.

To sum up, there are two main ways to implement routing permission control in Vue: one is to control it on the front end, that is, dynamically generate routing tables according to different user permissions; the other is to use The back-end interface controls, that is, the front-end initiates a request to the back-end and generates the corresponding routing table based on the returned permission information. In actual development, we can choose an appropriate method to implement routing permission control based on specific project conditions.

The above is the detailed content of Detailed explanation of how vue implements routing permission control. For more information, please follow other related articles on the PHP Chinese website!