vue实现登录权限控制
实现登录权限控制的基本思路
Vue中实现登录权限控制通常涉及路由守卫、状态管理和接口拦截。核心逻辑是在用户未登录时拦截非法访问，跳转到登录页；登录后根据权限动态加载可访问的路由。
路由守卫配置
在router/index.js中配置全局前置守卫，通过meta字段标记需要权限的路由：
const router = new VueRouter({
routes: [
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true }
}
]
})
router.beforeEach((to, from, next) => {
const isAuthenticated = store.getters.isLoggedIn
if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
next('/login')
} else {
next()
}
})状态管理实现
使用Vuex存储登录状态和用户权限信息：
// store/modules/auth.js
const state = {
token: localStorage.getItem('token') || '',
userInfo: null
}
const mutations = {
SET_TOKEN(state, token) {
state.token = token
localStorage.setItem('token', token)
},
SET_USER_INFO(state, userInfo) {
state.userInfo = userInfo
}
}
const actions = {
login({ commit }, credentials) {
return axios.post('/api/login', credentials).then(res => {
commit('SET_TOKEN', res.data.token)
commit('SET_USER_INFO', res.data.user)
})
}
}动态路由加载
根据用户权限动态添加路由：
// 定义基础路由和动态路由
const basicRoutes = [...]
const asyncRoutes = [...]
// 在登录成功后加载权限路由
function loadRoutes(roles) {
const allowedRoutes = asyncRoutes.filter(route => {
return !route.meta.roles || route.meta.roles.includes(roles)
})
router.addRoutes(allowedRoutes)
}API请求拦截
在axios拦截器中添加token验证：
axios.interceptors.request.use(config => {
const token = store.state.auth.token
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
})
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
store.commit('LOGOUT')
router.push('/login')
}
return Promise.reject(error)
}
)按钮级权限控制
通过自定义指令实现按钮级别的权限控制：
Vue.directive('permission', {
inserted(el, binding, vnode) {
const { value } = binding
const permissions = store.getters.permissions
if (value && !permissions.includes(value)) {
el.parentNode && el.parentNode.removeChild(el)
}
}
})
// 使用方式
<button v-permission="'user:delete'">删除</button>登录状态持久化
通过localStorage或cookie实现登录状态持久化：
// 初始化时从本地存储恢复状态
if (localStorage.getItem('token')) {
store.commit('SET_TOKEN', localStorage.getItem('token'))
axios.get('/api/userinfo').then(res => {
store.commit('SET_USER_INFO', res.data)
})
}退出登录处理
清除存储的状态和本地数据：
actions: {
logout({ commit }) {
commit('SET_TOKEN', '')
commit('SET_USER_INFO', null)
localStorage.removeItem('token')
router.push('/login')
}
}以上方案实现了完整的登录权限控制流程，包括路由拦截、状态管理、动态路由加载和接口权限验证。实际项目中可根据具体需求调整权限粒度。
