前端权限校验（以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.jsimport 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')

动态权限管理

常见步骤：

创建角色权限配置文件

// rolePermissions.jsexport default {admin: ['addUser', 'deleteUser', 'updateUser'],manager: ['addUser', 'updateUser'],editor: ['addArticle', 'editArticle'],guest: []
}

动态生成路由

// router.jsimport 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>