vue授权功能如何实现
Vue 授权功能实现方法
基于路由守卫的权限控制
安装 Vue Router 并配置路由守卫，在路由跳转前校验权限：
// router.js
const router = new VueRouter({...})
router.beforeEach((to, from, next) => {
const hasPermission = checkUserPermission(to.meta.requiresAuth)
if (to.meta.requiresAuth && !hasPermission) {
next('/login')
} else {
next()
}
})路由配置中添加元信息标记需要权限的页面：
{
path: '/admin',
component: AdminPanel,
meta: { requiresAuth: true }
}使用自定义指令控制元素显示
创建全局指令控制界面元素显隐：
// main.js
Vue.directive('permission', {
inserted(el, binding) {
if (!checkPermission(binding.value)) {
el.parentNode.removeChild(el)
}
}
})模板中使用指令：
<button v-permission="'create_user'">创建用户</button>状态管理集成权限数据
Vuex 存储权限信息并提供校验方法：
// store.js
export default new Vuex.Store({
state: {
permissions: []
},
getters: {
hasPermission: state => permission => {
return state.permissions.includes(permission)
}
}
})组件中使用：
computed: {
canEdit() {
return this.$store.getters.hasPermission('edit_content')
}
}动态菜单生成
根据权限过滤可访问的路由：
function filterRoutes(routes, permissions) {
return routes.filter(route => {
if (route.meta && route.meta.permission) {
return permissions.includes(route.meta.permission)
}
return true
})
}服务端权限验证
前端请求携带 token：
axios.interceptors.request.use(config => {
config.headers.Authorization = `Bearer ${getToken()}`
return config
})处理 403 响应：
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 403) {
// 处理权限不足情况
}
return Promise.reject(error)
}
)JWT 认证方案
登录后存储 token：
localStorage.setItem('token', response.data.token)请求时携带 token：
axios.get('/api/resource', {
headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
})权限数据持久化
使用 vuex-persistedstate 插件：
import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
plugins: [createPersistedState({
key: 'auth',
paths: ['user', 'permissions']
})]
})按钮级权限控制
封装权限组件：
Vue.component('permission', {
props: ['value'],
render(h) {
if (checkPermission(this.value)) {
return this.$slots.default[0]
}
return null
}
})模板中使用：
<permission value="delete_user">
<button>删除用户</button>
</permission>
