一篇帶你搞懂Vue項目里的權(quán)限控制

更新時間：2023年06月08日 10:29:31 作者：前端碎碎念

這篇文章主要為大家介紹了vue項目里的權(quán)限控制，文中有詳細的代碼示例供大家參考，有需要的朋友可以借鑒參考下，希望能夠有所幫助

菜單權(quán)限控制

在Vue中需要根據(jù)用戶的權(quán)限信息動態(tài)生成菜單，并在路由級別進行權(quán)限驗證，以實現(xiàn)菜單路由權(quán)限控制，具體可以按照以下步驟進行：

1. 定義菜單數(shù)據(jù)結(jié)構(gòu)

首先，定義一個菜單數(shù)據(jù)結(jié)構(gòu)，包含菜單項的名稱、路徑和權(quán)限標(biāo)識等信息。你可以根據(jù)項目需要，將菜單數(shù)據(jù)存儲在一個數(shù)組或?qū)ο笾小?/p>

const menuData = [
    {
    name: 'Home',
    path: '/home',
    permission: 'home:view' // 權(quán)限標(biāo)識
    },
    {
    name: 'Products',
    path: '/products',
    permission: 'products:view'
    },
    {
    name: 'Orders',
    path: '/orders',
    permission: 'orders:view'
    },
    // 其他菜單項...
    ];

2. 獲取用戶權(quán)限

在用戶登錄或應(yīng)用初始化時，獲取當(dāng)前用戶的權(quán)限信息，并將其保存在本地，例如使用Vuex或localStorage。以下是一個示例代碼實現(xiàn)：

 // 在登錄成功后的處理邏輯中 
 // 假設(shè)從服務(wù)器端獲取到的用戶權(quán)限信息為 userPermissions 
 // 存儲到Vuex 
 this.$store.commit('setUserPermissions', userPermissions); 
 // 或存儲到localStorage 
 localStorage.setItem('userPermissions', JSON.stringify(userPermissions));

在上述代碼中，假設(shè)從服務(wù)器端獲取到了用戶的權(quán)限信息 userPermissions。你可以使用Vuex的commit方法來觸發(fā)一個mutation，將權(quán)限信息存儲到Vuex的狀態(tài)管理中?；蛘?，你也可以將權(quán)限信息通過localStorage的setItem方法存儲到本地存儲中，通常需要將其轉(zhuǎn)換為字符串格式。

在Vuex中存儲用戶權(quán)限的示例代碼如下：

// 在Vuex的store模塊中定義mutations和state 
// store.js 
import Vue from 'vue'; 
import Vuex from 'vuex'; 
Vue.use(Vuex); 
const store = new Vuex.Store({ 
    state: { 
        userPermissions: [] // 初始狀態(tài)為空數(shù)組 
    },
    mutations: { 
        setUserPermissions(state, permissions) 
            { 
                state.userPermissions = permissions; 
            } 
        } 
       }); 
 export default store;

在以上示例中，我們定義了一個名為userPermissions的狀態(tài)，并在setUserPermissions mutation中將傳入的權(quán)限信息賦值給該狀態(tài)。

使用localStorage存儲用戶權(quán)限的示例代碼如下：

 // 在登錄成功后的處理邏輯中 
 // 假設(shè)從服務(wù)器端獲取到的用戶權(quán)限信息為 userPermissions 
 localStorage.setItem('userPermissions', JSON.stringify(userPermissions));

在上述代碼中，我們使用localStorage的setItem方法將用戶權(quán)限信息存儲為一個字符串。這樣，權(quán)限信息將被保存在瀏覽器的本地存儲中。

3. 根據(jù)權(quán)限生成菜單

在菜單組件中，根據(jù)用戶的權(quán)限信息，遍歷菜單數(shù)據(jù)，根據(jù)用戶擁有的權(quán)限標(biāo)識來生成對應(yīng)的可訪問菜單項。可以使用Vue的條件渲染指令，如v-if或v-show，來根據(jù)用戶的權(quán)限動態(tài)地顯示或隱藏菜單項。以下是一個示例代碼實現(xiàn)：

<template> 
    <div> 
        <ul> 
            <li v-for="item in menuData" :key="item.path" v-show="hasPermission(item.permission)"> 
            <router-link :to="item.path">{{ item.name }}</router-link> 
            </li> 
         </ul> 
     </div> 
 </template> 
 <script> 
     export default { 
         computed: { 
             menuData() { 
                 // 獲取菜單數(shù)據(jù) 
                 return menuData; 
             } }, 
         methods: { 
             hasPermission(permission) 
                 { 
                     // 判斷用戶是否有權(quán)限 
                     // 假設(shè)權(quán)限信息存儲在this.$store.state.user.permissions中 
                     const userPermissions = this.$store.state.user.permissions; 
                     return userPermissions.includes(permission); 
                 } 
          } 
     } 
</script>

路由守衛(wèi)權(quán)限控制

在Vue Router中，根據(jù)用戶的權(quán)限信息配置路由。在路由配置中，為每個需要進行權(quán)限控制的路由設(shè)置相應(yīng)的權(quán)限標(biāo)識。在導(dǎo)航守衛(wèi)（Navigation Guards）中，對用戶的訪問進行權(quán)限驗證。根據(jù)用戶的權(quán)限信息和路由配置，決定是否允許用戶訪問該路由。

全局前置守衛(wèi)（beforeEach）：在全局前置守衛(wèi)中，根據(jù)當(dāng)前路由的權(quán)限標(biāo)識和用戶的權(quán)限信息，進行權(quán)限驗證。如果用戶沒有權(quán)限訪問當(dāng)前路由，可以重定向到登錄頁面或顯示無權(quán)限的提示信息。
路由級別的元信息（meta）：在路由配置中，使用元信息（meta）字段來存儲路由的權(quán)限標(biāo)識。通過在導(dǎo)航守衛(wèi)中獲取路由的元信息，進行權(quán)限驗證和控制。

Vue Router配置：根據(jù)菜單數(shù)據(jù)的權(quán)限標(biāo)識，配置Vue Router的路由，并在導(dǎo)航守衛(wèi)中進行權(quán)限驗證。

import Vue from 'vue'; 
import Router from 'vue-router'; 
Vue.use(Router); 
const router = new Router({ 
    routes: [ 
        { 
            path: '/home', 
            component: Home, 
            meta: { permission: 'home:view' } // 路由權(quán)限標(biāo)識 
        }, 
        { 
             path: '/products', 
             component: Products, 
             meta: { permission: 'products:view' } 
         }, 
         { 
             path: '/orders', 
             component: Orders, 
             meta: { permission: 'orders:view' } 
          }, 
          // 其他路由配置... 
       ] 
 }); 
 router.beforeEach((to, from, next) => { 
     const userPermissions = store.state.user.permissions; 
     const requiredPermission = to.meta.permission; 
         if (requiredPermission && !userPermissions.includes(requiredPermission)) { 
             // 沒有權(quán)限，重定向到登錄頁面或顯示無權(quán)限提示 
             next('/login');
             // 或者顯示無權(quán)限提示頁面 
             // next('/no-permission'); 
          } else { 
              next(); 
           } 
    });
export default router;

組建級按鈕的權(quán)限控制

在需求進行按鈕級別權(quán)限控制的Vue組件中，可以使用指令或計算屬性來判斷用戶是否具有對應(yīng)的權(quán)限，從而決定按鈕的顯示與否或可操作性。

使用自定義指令：

<template> 
    <button v-permission="'user:create'">Create User</button> </template> <script> 
export default { 
    directives: { 
        permission: { 
            inserted(el, binding) 
                { 
                    const userPermissions = this.$store.state.user.permissions; 
                    const requiredPermission = binding.value; 
                    if (!userPermissions.includes(requiredPermission)) { 
                          el.style.display = 'none'; // 或禁用按鈕等操作 
                     } 
                } 
            } 
         } 
     } 
 </script>

使用計算屬性：

<template> 
       <button v-if="hasPermission('user:create')">Create User</button> </template> 
<script> 
        export default { 
            methods: { 
                hasPermission(permission) { 
                    const userPermissions = this.$store.state.user.permissions; 
                    return userPermissions.includes(permission); 
             } 
        } 
     } 
</script>

在上述示例中，我們使用了自定義指令v-permission和計算屬性hasPermission來判斷用戶是否具有user:create的權(quán)限。如果用戶沒有該權(quán)限，按鈕將被隱藏或禁用。

需要注意的是，在以上示例中，我們假設(shè)用戶的權(quán)限信息存儲在Vuex的state.user.permissions中，你可以根據(jù)實際情況進行相應(yīng)的調(diào)整。

API權(quán)限管理

有時候需要根據(jù)用戶的權(quán)限信息，限制用戶對后端API的訪問?？梢栽谇岸税l(fā)送API請求前進行權(quán)限判斷，并根據(jù)權(quán)限信息決定是否發(fā)送請求或進行其他處理。示例代碼如下：

axios.interceptors.request.use((config) => { 
    // 判斷用戶是否有權(quán)限訪問API 
    if (!hasPermission(config.url)) { 
        // 不允許訪問，取消請求或其他處理方式 
        return Promise.reject(new Error('無權(quán)限訪問該API')); 
   } 
   return config; 
   }, 
   (error) => { 
    return Promise.reject(error); 
   });

動態(tài)路由權(quán)限

在某些情況下，權(quán)限可能會根據(jù)用戶角色的不同而動態(tài)生成路由。這可以通過在登錄或權(quán)限更新時，根據(jù)用戶權(quán)限信息動態(tài)生成路由配置來實現(xiàn)。例如，可以將權(quán)限信息映射為路由對象，然后將這些動態(tài)生成的路由配置添加到路由器中。示例代碼如下：

// 動態(tài)生成路由配置 
    function generateRoutes(permissionList) { 
        const routes = []; 
        permissionList.forEach(permission => { 
            const route = { 
                path: permission.path, 
                component: () => import(`@/views/${permission.component}`), 
                meta: { // 其他路由元信息 } }; 
                routes.push(route); 
            }); 
        return routes; 
      } 
      // 添加動態(tài)路由 
      router.addRoutes(generateRoutes(permissionList));

角色管理

有時需要根據(jù)用戶的角色來管理權(quán)限?？梢詾槊總€角色分配一組權(quán)限，并根據(jù)用戶所屬的角色來判斷其是否有權(quán)訪問特定的功能。這可以通過在用戶登錄后獲取用戶的角色信息，并在需要進行權(quán)限判斷時根據(jù)角色來進行處理。示例代碼如下：

1.定義角色和權(quán)限：

   // 角色列表 
   const roles = [ 
       { id: 1, name: '管理員' }, 
       { id: 2, name: '普通用戶' } 
   ]; 
   // 權(quán)限列表 
   const permissions = [ 
       { id: 1, name: '創(chuàng)建用戶', role: '管理員' }, 
       { id: 2, name: '編輯用戶', role: '管理員' }, 
       { id: 3, name: '查看用戶', role: '管理員' }, 
       { id: 4, name: '查看用戶列表', role: '普通用戶' } 
   ];

2.獲取用戶角色：

    function getUserRoles(userId) { 
        // 根據(jù)用戶ID獲取用戶所屬的角色列表 
        // 返回一個包含角色名稱的數(shù)組 
   }

3.權(quán)限判斷：

   function hasPermission(permission, userId) 
   { 
       const userRoles = getUserRoles(userId); 
       // 根據(jù)用戶角色判斷是否具有權(quán)限 
       return permissions.some(p => p.name === permission && userRoles.includes(p.role)); 
    }

在這個示例中，我們定義了角色列表和權(quán)限列表。通過getUserRoles()函數(shù)獲取用戶的角色列表，然后使用hasPermission()函數(shù)來判斷用戶是否具有特定權(quán)限。hasPermission()函數(shù)會檢查用戶角色是否包含相應(yīng)權(quán)限的角色，如果包含則返回true，否則返回false。

以上是在實際應(yīng)用中，整理出的權(quán)限相關(guān)場景及解決思路和代碼示例，示例只是一個簡單的演示，實際情況下可能需要更復(fù)雜的角色和權(quán)限管理方案。

以上就是一篇帶你搞懂Vue項目里的權(quán)限控制的詳細內(nèi)容，更多關(guān)于Vue項目權(quán)限控制的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: