vue实现多用户登录
实现多用户登录的基本思路
在Vue中实现多用户登录通常需要结合后端API和前端状态管理。核心逻辑包括用户身份验证、权限区分和状态持久化。
后端API准备
确保后端提供以下接口：
- 登录接口（区分用户类型）
- 权限验证接口
- 用户信息获取接口
典型的登录请求示例：
axios.post('/api/login', {
username: 'user1',
password: '123456',
userType: 'admin' // 或 'customer' 等用户类型标识
})前端状态管理
使用Vuex存储用户信息和登录状态：
// store.js
const store = new Vuex.Store({
state: {
currentUser: null,
userType: null,
isAuthenticated: false
},
mutations: {
SET_USER(state, { user, userType }) {
state.currentUser = user
state.userType = userType
state.isAuthenticated = true
}
}
})登录组件实现
创建登录表单并处理不同用户类型：
// Login.vue
data() {
return {
form: {
username: '',
password: '',
userType: 'customer' // 默认用户类型
}
}
},
methods: {
async handleLogin() {
try {
const res = await loginApi(this.form)
this.$store.commit('SET_USER', {
user: res.data.user,
userType: this.form.userType
})
localStorage.setItem('token', res.data.token)
} catch (error) {
console.error(error)
}
}
}路由守卫配置
根据用户类型控制路由访问：
// router.js
router.beforeEach((to, from, next) => {
const isAuthenticated = store.state.isAuthenticated
const requiredRole = to.meta.role
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else if (requiredRole && store.state.userType !== requiredRole) {
next('/unauthorized')
} else {
next()
}
})权限指令实现
创建自定义指令控制UI元素显示：
// main.js
Vue.directive('permission', {
inserted(el, binding, vnode) {
const { value } = binding
const userType = vnode.context.$store.state.userType
if (value && !value.includes(userType)) {
el.parentNode && el.parentNode.removeChild(el)
}
}
})使用方式：
<button v-permission="['admin']">管理员按钮</button>状态持久化处理
在应用初始化时恢复登录状态：
// App.vue
created() {
const token = localStorage.getItem('token')
if (token) {
// 验证token有效性并获取用户信息
fetchUserInfo().then(user => {
this.$store.commit('SET_USER', {
user,
userType: user.type
})
})
}
}多用户类型界面适配
根据用户类型显示不同界面：
computed: {
isAdmin() {
return this.$store.state.userType === 'admin'
},
isCustomer() {
return this.$store.state.userType === 'customer'
}
}模板中使用：
<template>
<div>
<admin-dashboard v-if="isAdmin" />
<customer-portal v-if="isCustomer" />
</div>
</template>安全注意事项
- 始终在后端验证用户权限
- 使用HTTPS传输敏感数据
- 设置适当的token过期时间
- 实现密码强度策略
- 记录登录日志
以上方案可根据具体业务需求进行调整，核心是通过用户类型标识区分不同用户角色，并在前后端进行一致的权限控制。
