vue实现登录权限
Vue 实现登录权限的方法
路由守卫控制权限
在 Vue 项目中，可以通过路由守卫（Navigation Guards）来实现登录权限控制。在 router/index.js 中配置全局前置守卫，检查用户是否已登录。
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})路由配置中需要为需要权限的页面添加 meta 字段：
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true }
}状态管理保存登录状态
使用 Vuex 或 Pinia 来管理用户的登录状态和权限信息。在登录成功后，将用户信息和 token 保存在状态管理中。
// Vuex 示例
const store = new Vuex.Store({
state: {
user: null,
token: null
},
mutations: {
setUser(state, user) {
state.user = user
},
setToken(state, token) {
state.token = token
}
}
})登录接口处理
在登录页面中，处理登录逻辑并将 token 保存到本地存储和状态管理中。
methods: {
async handleLogin() {
try {
const response = await loginApi(this.form)
localStorage.setItem('token', response.data.token)
this.$store.commit('setToken', response.data.token)
this.$router.push('/dashboard')
} catch (error) {
console.error(error)
}
}
}权限指令控制界面元素
对于页面中的具体元素，可以使用自定义指令来控制显示权限。
Vue.directive('permission', {
inserted(el, binding, vnode) {
const { value } = binding
const permissions = vnode.context.$store.state.user.permissions
if (!permissions.includes(value)) {
el.parentNode && el.parentNode.removeChild(el)
}
}
})使用方式：
<button v-permission="'admin'">管理员按钮</button>动态路由加载
根据用户权限动态加载可访问的路由。在用户登录后，根据权限获取可访问的路由配置并动态添加到路由实例中。
async function loadRoutes() {
const permissions = await getUserPermissions()
const allowedRoutes = filterRoutes(allRoutes, permissions)
router.addRoutes(allowedRoutes)
}Token 过期处理
在请求拦截器中检查 token 是否过期，如果过期则跳转到登录页面。
axios.interceptors.response.use(response => {
return response
}, error => {
if (error.response.status === 401) {
localStorage.removeItem('token')
router.push('/login')
}
return Promise.reject(error)
})退出登录处理
在退出登录时清除本地存储和状态管理中的用户信息。
methods: {
logout() {
localStorage.removeItem('token')
this.$store.commit('setToken', null)
this.$store.commit('setUser', null)
this.$router.push('/login')
}
}通过以上方法组合使用，可以实现完整的登录权限控制流程，包括路由权限、界面元素权限和 API 请求权限的控制。
