前端權(quán)限校驗(yàn)僅作為一種輔助手段，真正的權(quán)限控制應(yīng)當(dāng)在后端進(jìn)行。

路由級(jí)別權(quán)限控制

常見(jiàn)步驟：

1. 定義路由配置：在前端應(yīng)用的路由配置文件中，定義各個(gè)路由以及它們所需要的權(quán)限信息?？梢允褂萌魏我环N前端框架或庫(kù)提供的路由機(jī)制，例如React Router或Vue Router。
2. 創(chuàng)建權(quán)限驗(yàn)證函數(shù)：編寫一個(gè)權(quán)限驗(yàn)證函數(shù)，用于判斷用戶是否具備訪問(wèn)當(dāng)前路由的權(quán)限。這個(gè)函數(shù)可以根據(jù)用戶的身份、角色或其他標(biāo)識(shí)信息，結(jié)合路由配置中定義的權(quán)限信息，來(lái)進(jìn)行判斷。
3. 添加權(quán)限校驗(yàn)邏輯：在路由配置中，對(duì)每個(gè)需要進(jìn)行權(quán)限校驗(yàn)的路由進(jìn)行配置?？梢允褂弥虚g件、鉤子函數(shù)或類似的機(jī)制，在路由導(dǎo)航之前執(zhí)行權(quán)限校驗(yàn)邏輯。
4. 處理權(quán)限不足情況：如果用戶沒(méi)有足夠的權(quán)限訪問(wèn)某個(gè)頁(yè)面或執(zhí)行某個(gè)操作，需要根據(jù)具體的業(yè)務(wù)需求進(jìn)行相應(yīng)的處理?？梢蕴D(zhuǎn)到一個(gè)無(wú)權(quán)限提示頁(yè)面、展示一個(gè)錯(cuò)誤提示信息，或者隱藏對(duì)應(yīng)的菜單/按鈕等。

// 導(dǎo)入需要的模塊
import Vue from 'vue';
import VueRouter from 'vue-router';

// 注冊(cè)Vue Router插件
Vue.use(VueRouter);

// 創(chuàng)建路由實(shí)例
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      meta: {
        requiresAuth: true // 需要登錄才能訪問(wèn)的路由
      }
    },
    {
      path: '/dashboard',
      component: Dashboard,
      meta: {
        requiresAuth: true,
        requiresAdmin: true // 需要登錄且為管理員角色才能訪問(wèn)的路由
      }
    },
    {
      path: '/profile',
      component: Profile,
      meta: {
        requiresAuth: true
      }
    },
    // ...
  ]
});

// 添加全局的路由導(dǎo)航守衛(wèi)
router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth(); // 檢查用戶是否已登錄
  const isAdmin = checkAdmin(); // 檢查用戶是否為管理員

  if (to.meta.requiresAuth && !isAuthenticated) {
    // 需要登錄但用戶未登錄
    next('/login');
  } else if (to.meta.requiresAdmin && (!isAuthenticated || !isAdmin)) {
    // 需要管理員角色但用戶未登錄或未具備管理員權(quán)限
    next('/access-denied');
  } else {
    // 允許訪問(wèn)
    next();
  }
});

// 導(dǎo)出路由實(shí)例
export default router;

組件級(jí)別權(quán)限控制

常見(jiàn)步驟：

1. 定義權(quán)限指令或組件：為了簡(jiǎn)化權(quán)限控制的代碼，可以創(chuàng)建一個(gè)權(quán)限指令或組件來(lái)處理權(quán)限邏輯。這個(gè)指令或組件可以根據(jù)用戶權(quán)限來(lái)顯示或隱藏相關(guān)內(nèi)容。
2. 獲取用戶權(quán)限：從后端獲取當(dāng)前用戶的權(quán)限信息，可以通過(guò)接口返回的數(shù)據(jù)或者在登錄時(shí)進(jìn)行獲取。用戶權(quán)限可以是用戶角色、權(quán)限標(biāo)識(shí)或其他適當(dāng)?shù)姆绞健?/li>
3. 利用指令或組件進(jìn)行權(quán)限校驗(yàn)：在需要進(jìn)行權(quán)限控制的組件中使用權(quán)限指令或嵌入權(quán)限組件。這個(gè)指令或組件根據(jù)用戶的權(quán)限信息，判斷是否顯示或隱藏組件內(nèi)容。

// 在Vue組件中定義一個(gè)自定義指令
Vue.directive('permission', {
  bind: function (el, binding, vnode) {
    // 獲取當(dāng)前用戶的權(quán)限信息（假設(shè)權(quán)限信息存儲(chǔ)在Vuex中的user模塊）
    const userRoles = vnode.context.$store.state.user.roles;

    // 獲取指令傳遞的權(quán)限要求
    const requiredRoles = binding.value;

    // 檢查用戶權(quán)限與要求的權(quán)限是否匹配
    const hasPermission = requiredRoles.some(role => userRoles.includes(role));

    // 根據(jù)權(quán)限控制顯示或隱藏組件
    if (!hasPermission) {
      el.style.display = 'none';
    }
  }
});

<template>
  <div>
    <button v-permission="['admin']">Admin Button</button>
    <button v-permission="['user', 'admin']">User/Admin Button</button>
  </div>
</template>

API 請(qǐng)求校驗(yàn)

常見(jiàn)路由攔截：

// main.js

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

// 在路由跳轉(zhuǎn)前進(jìn)行權(quán)限校驗(yàn)
router.beforeEach((to, from, next) => {
  // 獲取用戶的權(quán)限信息，可以從后端獲取或從本地存儲(chǔ)中獲取
  const userRoles = getUserRoles()

  // 檢查目標(biāo)路由是否需要權(quán)限校驗(yàn)
  if (to.meta.requiresAuth) {
    // 檢查用戶是否具有足夠的權(quán)限
    if (checkUserRole(userRoles, to.meta.requiredRoles)) {
      // 用戶具有足夠權(quán)限，繼續(xù)跳轉(zhuǎn)
      next()
    } else {
      // 用戶權(quán)限不足，重定向到權(quán)限不足的頁(yè)面或顯示提示信息
      next('/unauthorized')
    }
  } else {
    // 不需要權(quán)限校驗(yàn)的路由，直接跳轉(zhuǎn)
    next()
  }
})

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

動(dòng)態(tài)權(quán)限管理

常見(jiàn)步驟：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-560946.html

1. 創(chuàng)建角色權(quán)限配置文件

// rolePermissions.js

export default {
  admin: ['addUser', 'deleteUser', 'updateUser'],
  manager: ['addUser', 'updateUser'],
  editor: ['addArticle', 'editArticle'],
  guest: []
}

2. 動(dòng)態(tài)生成路由

// router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import rolePermissions from './rolePermissions' // 角色權(quán)限配置文件

Vue.use(VueRouter)

const routes = [
  { path: '/login', component: Login },
  // 其他通用路由...
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 根據(jù)角色權(quán)限配置動(dòng)態(tài)生成路由
function generateRoutes(allowedRoles) {
  const dynamicRoutes = allowedRoles.reduce((routes, role) => {
    const permissions = rolePermissions[role]

    // 根據(jù)權(quán)限動(dòng)態(tài)生成路由
    const roleRoutes = permissions.map(permission => {
      return {
        // 根據(jù)權(quán)限信息設(shè)置路由path、component等屬性
        path: permission,
        component: () => import(`./views/${permission}.vue`)
      }
    })

    return routes.concat(roleRoutes)
  }, [])

  // 將動(dòng)態(tài)生成的路由添加到路由配置中
  router.addRoutes(dynamicRoutes)

  // 如果需要，將動(dòng)態(tài)生成的路由存儲(chǔ)到本地，以便在刷新頁(yè)面后繼續(xù)使用
  // localStorage.setItem('dynamicRoutes', JSON.stringify(dynamicRoutes))
}

export default router

3. 權(quán)限校驗(yàn)：在需要進(jìn)行權(quán)限校驗(yàn)的組件中，用鉤子函數(shù)進(jìn)行校驗(yàn)

// Example.vue

<script>
export default {
  // 組件被創(chuàng)建前的路由導(dǎo)航守衛(wèi)
  beforeRouteEnter(to, from, next) {
    // 獲取當(dāng)前用戶的角色
    const userRole = getCurrentUserRole()

    // 根據(jù)當(dāng)前角色的權(quán)限判斷是否有權(quán)限訪問(wèn)該頁(yè)面
    if (checkPermission(userRole, to.path)) {
      next()
    } else {
      next('/unauthorized')
    }
  },
  // ...
}
</script>

到了這里，關(guān)于前端權(quán)限校驗(yàn)（以Vue2為例）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！