vue使用路由守衛(wèi)實現(xiàn)菜單的權(quán)限設置

更新時間：2023年06月07日 12:00:38 作者：yookooi

我們使?vue-element-admin前端框架開發(fā)后臺管理系統(tǒng)時,?般都會涉及到菜單的權(quán)限控制問題,下面這篇文章主要給大家介紹了關(guān)于vue使用路由守衛(wèi)實現(xiàn)菜單的權(quán)限設置的相關(guān)資料,需要的朋友可以參考下

實現(xiàn)方法：

1.在路由配置中添加meta字段，用于存儲路由的訪問權(quán)限等信息。

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      meta: { requiresAuth: true, roles: ['admin', 'user'] }
    },
    {
      path: '/dashboard',
      component: Dashboard,
      meta: { requiresAuth: true, roles: ['admin'] }
    },
    // ...
  ]
});

在以上代碼中，我們在路由配置中添加了meta字段，并存儲了路由的訪問權(quán)限等信息。requiresAuth表示該路由是否需要登錄才能訪問，roles表示該路由可以被哪些角色訪問。

2.在全局路由守衛(wèi)中檢查用戶的訪問權(quán)限。

我們使用全局路由守衛(wèi)來檢查用戶的訪問權(quán)限。首先，我們檢查用戶是否已經(jīng)登錄。然后，檢查該路由是否需要登錄才能訪問。如果需要登錄且用戶未登錄，則跳轉(zhuǎn)到登錄頁。如果需要登錄且需要角色權(quán)限且用戶不具備對應的角色權(quán)限，則跳轉(zhuǎn)到無權(quán)限提示頁。最后，其他情況均放行。

router.beforeEach((to, from, next) => {
  const isLoggedIn = AuthService.isLoggedIn(); // 檢查用戶是否已經(jīng)登錄
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  const roles = to.meta.roles || [];
  if (requiresAuth && !isLoggedIn) {
    // 如果需要登錄且用戶未登錄，則跳轉(zhuǎn)到登錄頁
    next('/login');
  } else if (requiresAuth && roles.length > 0 && !AuthService.hasRoles(roles)) {
    // 如果需要登錄且需要角色權(quán)限且用戶不具備對應的角色權(quán)限，則跳轉(zhuǎn)到無權(quán)限提示頁
    next('/forbidden');
  } else {
    // 其他情況均放行
    next();
  }
});

3.在菜單組件中根據(jù)用戶的訪問權(quán)限來生成菜單。

我們使用canAccess()方法來檢查當前用戶是否有權(quán)訪問某個路由。首先，我們查找該路由對應的路由配置，并從該配置中獲取路由的訪問權(quán)限等信息。然后，根據(jù)路由的訪問權(quán)限等信息和當前用戶的登錄狀態(tài)、角色等信息來判斷是否有權(quán)訪問該路由。

在菜單組件中，我們使用v-if指令來根據(jù)用戶的訪問權(quán)限來生成菜單。如果用戶有權(quán)訪問某個路由，則顯示該路由對應的菜單項；否則，不顯示該菜單項。

<template>
  <div>
    <nav>
      <ul>
        <li v-if="canAccess('/home')"><router-link to="/home">Home</router-link></li>
        <li v-if="canAccess('/dashboard')"><router-link to="/dashboard">Dashboard</router-link></li>
        <!-- ... -->
      </ul>
    </nav>
  </div>
</template>
<script>
export default {
  methods: {
    canAccess(path) {
      const route = this.$router.options.routes.find(r => r.path === path);
      return route && (!route.meta.requiresAuth || AuthService.isLoggedIn()) && (!route.meta.roles || AuthService.hasRoles(route.meta.roles));
    }
  }
};
</script>

通過以上步驟，可以根據(jù)用戶的訪問權(quán)限來生成菜單，并且在用戶訪問某個路由時進行權(quán)限檢查，從而確保應用程序的安全性和穩(wěn)定性。