前端权限校验是一种在前端代码中进行权限验证的方法，用于保护系统资源和数据的安全性。它可以确保只有具有合适权限的用户才能访问受限资源。
- 路由级别权限控制：通过在前端路由中配置权限信息，可以控制用户能够访问的页面。在访问每个页面之前，校验用户的权限或角色，并根据校验结果决定是否允许访问。
- 组件级别权限控制：在前端组件中对需要权限控制的功能进行校验。例如，在按钮点击事件中先判断当前用户是否具备操作该功能的权限，如果没有权限，则禁用或隐藏对应的按钮。
- 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')
动态权限管理
常见步骤：
- 创建角色权限配置文件
// 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>
[复制链接]
发表于 2023-11-22 08:52
