vue实现权限登录
Vue 实现权限登录方案
路由权限控制
使用 Vue Router 的全局前置守卫 beforeEach 进行路由拦截，结合 meta 字段标记权限。未登录用户访问受限路由时重定向到登录页。
// 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()
}
})动态菜单生成
根据用户权限数据动态生成侧边栏菜单，通常需要后端返回权限树结构。使用 v-if 或递归组件渲染菜单。
// 示例权限数据结构
const permissionTree = [
{
path: '/dashboard',
name: 'Dashboard',
meta: { title: '控制台', icon: 'dashboard' }
},
{
path: '/admin',
name: 'Admin',
meta: { role: 'admin' }
}
]按钮级权限
通过自定义指令 v-permission 控制按钮显示，或使用权限判断函数包裹按钮。
// main.js
Vue.directive('permission', {
inserted(el, binding) {
const permissions = store.getters.permissions
if (!permissions.includes(binding.value)) {
el.parentNode.removeChild(el)
}
}
})
// 使用方式
<button v-permission="'user:delete'">删除</button>接口权限控制
在 axios 拦截器中添加 token，后端根据 token 校验权限。401 状态码时清除本地存储并跳转登录页。
// http.js
axios.interceptors.request.use(config => {
config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`
return config
})
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
router.push('/login')
}
return Promise.reject(error)
}
)状态管理
使用 Vuex 集中管理用户权限信息，通过 getters 提供权限判断方法。
// store.js
const store = new Vuex.Store({
state: {
permissions: []
},
mutations: {
SET_PERMISSIONS(state, permissions) {
state.permissions = permissions
}
},
getters: {
hasPermission: state => permission => {
return state.permissions.includes(permission)
}
}
})登录流程示例
用户登录成功后存储 token 并获取权限数据，跳转到首页前初始化权限系统。
// Login.vue
async handleLogin() {
try {
const res = await loginApi(this.form)
localStorage.setItem('token', res.data.token)
const permissions = await getPermissionApi()
this.$store.commit('SET_PERMISSIONS', permissions)
this.$router.push('/')
} catch (error) {
console.error(error)
}
}权限数据持久化
考虑使用 sessionStorage 或 cookie 存储 token，页面刷新时重新获取权限数据。
// App.vue
created() {
if (localStorage.getItem('token')) {
this.$store.dispatch('getUserInfo')
}
}注意事项
- 后端接口必须进行权限校验，前端控制仅为体验优化
- 敏感路由应添加 404 兜底处理
- 生产环境建议使用 https 保护 token 传输
- 定期更新 token 有效期机制
- 退出登录时清除所有权限相关存储
实现完整的权限系统通常需要前后端协同设计，上述方案可根据实际项目需求进行组合或调整。
