前端权限校验（以Vue2为例）-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端权限校验（以Vue2为例）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前端权限校验是一种在前端代码中进行权限验证的方法，用于保护系统资源和数据的安全性。它可以确保只有具有合适权限的用户才能访问受限资源。

路由级别权限控制：通过在前端路由中配置权限信息，可以控制用户能够访问的页面。在访问每个页面之前，校验用户的权限或角色，并根据校验结果决定是否允许访问。
组件级别权限控制：在前端组件中对需要权限控制的功能进行校验。例如，在按钮点击事件中先判断当前用户是否具备操作该功能的权限，如果没有权限，则禁用或隐藏对应的按钮。
API 请求校验：在前端发起 API 请求时，校验用户的权限信息。可以在请求头中携带用户的认证信息（如 token），后端在接收请求时进行权限校验，根据校验结果返回相应的数据或错误信息。
动态权限管理：前端权限校验应该与后端的权限管理系统相结合。前端应定期从后端获取最新的权限信息，以确保权限控制的准确性。用户的权限信息可以由后端控制并通过接口传递给前端，前端据此进行权限校验。
前端加密和安全性保护：使用加密算法对敏感数据进行加密，确保数据在传输和存储过程中的安全性。同时，应使用安全的前端框架和库，并保持其最新的更新版本，以防止潜在的安全漏洞。

前端权限校验仅作为一种辅助手段，真正的权限控制应当在后端进行。

路由级别权限控制

常见步骤：

定义路由配置：在前端应用的路由配置文件中，定义各个路由以及它们所需要的权限信息。可以使用任何一种前端框架或库提供的路由机制，例如React Router或Vue Router。
创建权限验证函数：编写一个权限验证函数，用于判断用户是否具备访问当前路由的权限。这个函数可以根据用户的身份、角色或其他标识信息，结合路由配置中定义的权限信息，来进行判断。
添加权限校验逻辑：在路由配置中，对每个需要进行权限校验的路由进行配置。可以使用中间件、钩子函数或类似的机制，在路由导航之前执行权限校验逻辑。
处理权限不足情况：如果用户没有足够的权限访问某个页面或执行某个操作，需要根据具体的业务需求进行相应的处理。可以跳转到一个无权限提示页面、展示一个错误提示信息，或者隐藏对应的菜单/按钮等。

// 导入需要的模块
import Vue from 'vue';
import VueRouter from 'vue-router';

// 注册Vue Router插件
Vue.use(VueRouter);

// 创建路由实例
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      meta: {
        requiresAuth: true // 需要登录才能访问的路由
      }
    },
    {
      path: '/dashboard',
      component: Dashboard,
      meta: {
        requiresAuth: true,
        requiresAdmin: true // 需要登录且为管理员角色才能访问的路由
      }
    },
    {
      path: '/profile',
      component: Profile,
      meta: {
        requiresAuth: true
      }
    },
    // ...
  ]
});

// 添加全局的路由导航守卫
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)) {
    // 需要管理员角色但用户未登录或未具备管理员权限
    next('/access-denied');
  } else {
    // 允许访问
    next();
  }
});

// 导出路由实例
export default router;

组件级别权限控制

常见步骤：

定义权限指令或组件：为了简化权限控制的代码，可以创建一个权限指令或组件来处理权限逻辑。这个指令或组件可以根据用户权限来显示或隐藏相关内容。
获取用户权限：从后端获取当前用户的权限信息，可以通过接口返回的数据或者在登录时进行获取。用户权限可以是用户角色、权限标识或其他适当的方式。
利用指令或组件进行权限校验：在需要进行权限控制的组件中使用权限指令或嵌入权限组件。这个指令或组件根据用户的权限信息，判断是否显示或隐藏组件内容。

// 在Vue组件中定义一个自定义指令
Vue.directive('permission', {
  bind: function (el, binding, vnode) {
    // 获取当前用户的权限信息（假设权限信息存储在Vuex中的user模块）
    const userRoles = vnode.context.$store.state.user.roles;

    // 获取指令传递的权限要求
    const requiredRoles = binding.value;

    // 检查用户权限与要求的权限是否匹配
    const hasPermission = requiredRoles.some(role => userRoles.includes(role));

    // 根据权限控制显示或隐藏组件
    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 请求校验

常见路由拦截：

// main.js

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

// 在路由跳转前进行权限校验
router.beforeEach((to, from, next) => {
  // 获取用户的权限信息，可以从后端获取或从本地存储中获取
  const userRoles = getUserRoles()

  // 检查目标路由是否需要权限校验
  if (to.meta.requiresAuth) {
    // 检查用户是否具有足够的权限
    if (checkUserRole(userRoles, to.meta.requiredRoles)) {
      // 用户具有足够权限，继续跳转
      next()
    } else {
      // 用户权限不足，重定向到权限不足的页面或显示提示信息
      next('/unauthorized')
    }
  } else {
    // 不需要权限校验的路由，直接跳转
    next()
  }
})

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

动态权限管理

常见步骤：文章来源地址https://www.toymoban.com/news/detail-560946.html

创建角色权限配置文件

// rolePermissions.js

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

动态生成路由

// router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import rolePermissions from './rolePermissions' // 角色权限配置文件

Vue.use(VueRouter)

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

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

// 根据角色权限配置动态生成路由
function generateRoutes(allowedRoles) {
  const dynamicRoutes = allowedRoles.reduce((routes, role) => {
    const permissions = rolePermissions[role]

    // 根据权限动态生成路由
    const roleRoutes = permissions.map(permission => {
      return {
        // 根据权限信息设置路由path、component等属性
        path: permission,
        component: () => import(`./views/${permission}.vue`)
      }
    })

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

  // 将动态生成的路由添加到路由配置中
  router.addRoutes(dynamicRoutes)

  // 如果需要，将动态生成的路由存储到本地，以便在刷新页面后继续使用
  // localStorage.setItem('dynamicRoutes', JSON.stringify(dynamicRoutes))
}

export default router

权限校验：在需要进行权限校验的组件中，用钩子函数进行校验

// Example.vue

<script>
export default {
  // 组件被创建前的路由导航守卫
  beforeRouteEnter(to, from, next) {
    // 获取当前用户的角色
    const userRole = getCurrentUserRole()

    // 根据当前角色的权限判断是否有权限访问该页面
    if (checkPermission(userRole, to.path)) {
      next()
    } else {
      next('/unauthorized')
    }
  },
  // ...
}
</script>