vue实现登录权限
Vue 实现登录权限方案
路由守卫控制访问权限
安装vue-router并配置路由守卫，在全局前置守卫中检查用户登录状态和权限。未登录用户访问受限路由时重定向到登录页。
// router.js
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
if (requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})动态路由配置
根据用户角色动态添加路由，不同权限用户看到不同的菜单结构。后端返回用户权限列表后，通过router.addRoutes添加对应路由。
// 过滤有权限的路由
const filterRoutes = (routes, roles) => {
return routes.filter(route => {
if (route.meta && route.meta.roles) {
return roles.some(role => route.meta.roles.includes(role))
}
return true
})
}Token验证机制
登录成功后将JWT token存储到localStorage或Vuex中，后续请求通过axios拦截器自动携带token。
// axios拦截器
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
})权限指令控制
创建自定义指令v-permission，控制页面元素的显示隐藏，实现按钮级权限控制。
// main.js
Vue.directive('permission', {
inserted(el, binding) {
const permissions = store.getters.permissions
if (!permissions.includes(binding.value)) {
el.parentNode.removeChild(el)
}
}
})状态管理集成
使用Vuex集中管理用户登录状态和权限信息，提供getters方便组件获取权限数据。
// store.js
export default new Vuex.Store({
state: {
token: '',
roles: []
},
mutations: {
SET_TOKEN(state, token) {
state.token = token
},
SET_ROLES(state, roles) {
state.roles = roles
}
}
})服务端验证
客户端权限控制只是体验优化，必须在服务端对每个请求进行权限验证，防止恶意绕过前端检查。
权限数据持久化
用户刷新页面后需要重新获取权限数据，可通过在App.vue的created钩子中调用权限初始化方法实现。
// App.vue
created() {
if (this.$store.state.token) {
this.$store.dispatch('getUserInfo')
}
}
