vue实现登录权限
路由守卫实现权限控制
在Vue项目中，可以通过路由守卫（Navigation Guards）来控制页面访问权限。在router/index.js中配置全局前置守卫：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!isAuthenticated) {
next({ path: '/login' })
} else {
next()
}
} else {
next()
}
})路由配置中添加元信息标记需要认证的页面：
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true }
}登录状态管理
使用Vuex管理用户登录状态和token信息：
const store = new Vuex.Store({
state: {
token: null,
userInfo: null
},
mutations: {
setToken(state, token) {
state.token = token
localStorage.setItem('token', token)
},
clearToken(state) {
state.token = null
localStorage.removeItem('token')
}
},
actions: {
login({ commit }, credentials) {
return axios.post('/api/login', credentials)
.then(response => {
commit('setToken', response.data.token)
})
}
}
})动态路由配置
根据用户权限动态添加路由：
function generateRoutes(userRoles) {
const baseRoutes = [...]
const adminRoutes = userRoles.includes('admin') ? [...] : []
return [...baseRoutes, ...adminRoutes]
}
router.addRoutes(generateRoutes(user.roles))权限指令实现
创建自定义指令控制元素显示权限：
Vue.directive('permission', {
inserted: (el, binding, vnode) => {
const { hasPermission } = vnode.context
if (!hasPermission(binding.value)) {
el.parentNode.removeChild(el)
}
}
})在组件中使用：
<button v-permission="'create-user'">创建用户</button>登录页面实现
典型登录表单处理：
methods: {
handleLogin() {
this.$store.dispatch('login', this.form)
.then(() => {
this.$router.push(this.$route.query.redirect || '/')
})
.catch(error => {
this.error = error.message
})
}
}接口请求拦截
在axios拦截器中添加token：
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
})错误处理
统一处理401未授权错误：
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
store.commit('clearToken')
router.push('/login')
}
return Promise.reject(error)
}
)持久化登录状态
在应用初始化时恢复登录状态：
new Vue({
created() {
const token = localStorage.getItem('token')
if (token) {
this.$store.commit('setToken', token)
}
}
})以上方案实现了完整的登录权限控制流程，包括路由守卫、状态管理、动态路由、权限指令等核心功能，可根据实际项目需求进行调整和扩展。
