【揭秘Vue3路由守衛】輕鬆實現許可權控制的實戰攻略

最佳答案

在Vue3項目中，路由保衛是一個富強的東西，它容許開辟者把持用戶在利用中的導航流程。經由過程利用路由保衛，可能實現容許權把持，確保用戶只能拜訪他們有容許權的頁面。本文將深刻探究Vue3路由保衛的道理，並供給一些實戰技能，幫助開辟者輕鬆實現容許權把持。

路由保衛概述

Vue3中的路由保衛分為三品種型：

全局前置保衛 (beforeEach): 在導航觸發之前全局地挪用。
路由獨享保衛 (beforeEnter): 在路由設置上直接定義。
組件內保衛 (beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave): 在路由組件外部定義。

這些保衛可能在差其余階段停止容許權驗證，從而把持用戶的拜訪容許權。

實戰步調

1. 定義路由

起首，須要定義路由，並在路由設置中設置元信息（meta），用於存儲容許權相幹的數據。

const routes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    meta: { requiresAuth: true }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
];

2. 創建路由保衛

在全局前置保衛中，檢查用戶的容許權，並根據容許權決定能否容許導航。

router.beforeEach((to, from, next) => {
  const isLoggedIn = localStorage.getItem('isLoggedIn');
  if (to.matched.some(record => record.meta.requiresAuth) && !isLoggedIn) {
    next('/login');
  } else {
    next();
  }
});

3. 靜態增加路由

假如須要根據用戶的角色靜態增加路由，可能利用router.addRoute方法。

const userRole = 'admin';
if (userRole === 'admin') {
  router.addRoute('main', {
    path: '/admin',
    name: 'Admin',
    component: Admin,
    meta: { requiresAuth: true }
  });
}

4. 容許權指令

利用自定義指令來把持元素或組件的表現，基於用戶的容許權。

Vue.directive('role', {
  inserted: (el, binding) => {
    const roles = binding.value;
    const userRole = localStorage.getItem('userRole');
    if (!roles.includes(userRole)) {
      el.parentNode.removeChild(el);
    }
  }
});

5. 角色把持

根據用戶的角色來把持拜訪容許權。

router.beforeEach((to, from, next) => {
  const userRole = localStorage.getItem('userRole');
  if (to.meta.roles && !to.meta.roles.includes(userRole)) {
    next('/unauthorized');
  } else {
    next();
  }
});

總結

經由過程以上步調，可能輕鬆地在Vue3項目中實現容許權把持。路由保衛為開辟者供給了富強的功能，可能機動地把持用戶的拜訪容許權。在現實項目中，可能根據具體須要調劑跟優化容許權把持邏輯，確保利用的保險性。