xianglin_admin/iFileProxyAdmin
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

优化登录成功跳转逻辑 细化前端页面权限

Browse source
This commit is contained in:
root 2024-12-01 16:45:35 +08:00
parent 23e48a5da2
commit 5d7a8d7f5c
4 changed files with 106 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/layout/Layout.vue
View file

@ -22,30 +22,26 @@
text-color="rgba(255,255,255,0.65)"
active-text-color="#fff"
:collapse="isCollapse">
<el-menu-item :index="`${ADMIN_ROUTE_BASE}/dashboard`">
<el-menu-item :index="`${ADMIN_ROUTE_BASE}/dashboard`" v-if="hasPermission(UserMask.Admin, userInfo?.mask)">
<el-icon><DataLine /></el-icon>
<span>概览面板</span>
</el-menu-item>
<template v-if="userRole === 'admin'">
<el-menu-item :index="`${ADMIN_ROUTE_BASE}/tasks`">
<el-menu-item :index="`${ADMIN_ROUTE_BASE}/tasks`" v-if="hasPermission(UserMask.Admin, userInfo?.mask)">
<el-icon><List /></el-icon>
<span>任务管理</span>
</el-menu-item>
<el-menu-item :index="`${ADMIN_ROUTE_BASE}/config`">
<el-menu-item :index="`${ADMIN_ROUTE_BASE}/config`" v-if="hasPermission(UserMask.Admin, userInfo?.mask)">
<el-icon><Setting /></el-icon>
<span>系统配置</span>
</el-menu-item>
<template v-if="userInfo.mask === 2">
<el-menu-item :index="`${ADMIN_ROUTE_BASE}/users`">
<el-menu-item :index="`${ADMIN_ROUTE_BASE}/users`" v-if="hasPermission(UserMask.SuperAdmin, userInfo?.mask)">
<el-icon><User /></el-icon>
<span>用户管理</span>
</el-menu-item>
</template>
<el-menu-item :index="`${ADMIN_ROUTE_BASE}/events`">
<el-icon><List /></el-icon>
<span>事件记录</span>
</el-menu-item>
</template>
</el-menu>
</el-aside>
@ -91,11 +87,18 @@ import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { DataLine, List, Expand, Fold, Setting, User, SwitchButton } from '@element-plus/icons-vue'
import { ADMIN_ROUTE_BASE } from '@/config/api.config'
import { UserMask, hasPermission } from '@/utils/permission'
const router = useRouter()
const route = useRoute()
const userRole = computed(() => localStorage.getItem('userRole'))
const userInfo = computed(() => JSON.parse(localStorage.getItem('userInfo')))
const userInfo = computed(() => {
try {
return JSON.parse(localStorage.getItem('userInfo'))
} catch {
return null
}
})
const handleLogout = () => {
localStorage.removeItem('token')

39
src/router/index.js
View file

@ -3,6 +3,7 @@ import { ElMessage } from 'element-plus'
import Layout from '../layout/Layout.vue'
import { UserAPI } from '../api/user'
import { ADMIN_ROUTE_BASE } from '@/config/api.config'
import { UserMask, hasPermission } from '@/utils/permission'
const routes = [
{
@ -28,25 +29,33 @@ const routes = [
path: 'dashboard',
name: 'Dashboard',
component: () => import('../views/Dashboard.vue'),
meta: { roles: ['admin', 'guest'] }
meta: {
minMask: UserMask.Admin // 管理员及以上权限可访问
}
},
{
path: 'tasks',
name: 'Tasks',
component: () => import('../views/TaskManagement.vue'),
meta: { roles: ['admin'] }
meta: {
minMask: UserMask.Admin // 管理员及以上权限可访问
}
},
{
path: 'config',
name: 'Config',
component: () => import('../views/ConfigView.vue'),
meta: { roles: ['admin'] }
meta: {
minMask: UserMask.Admin // 管理员及以上权限可访问
}
},
{
path: 'users',
name: 'Users',
component: () => import('../views/UserManagement.vue'),
meta: { roles: ['admin'] }
meta: {
minMask: UserMask.SuperAdmin // 仅超级管理员可访问
}
},
{
path: 'profile',
@ -129,31 +138,15 @@ router.beforeEach(async (to, from, next) => {
if (to.path.startsWith(ADMIN_ROUTE_BASE)) {
const token = localStorage.getItem('token')
const isAuthenticated = localStorage.getItem('isAuthenticated')
const userRole = localStorage.getItem('userRole')
const userInfo = JSON.parse(localStorage.getItem('userInfo'))
if (!isAuthenticated) {
if (!isAuthenticated || !token || !userInfo) {
next('/login')
return
}
// 如果是管理员但没有用户信息，尝试获取
if (userRole === 'admin' && token) {
try {
const response = await UserAPI.getUserInfo()
if (response.retcode !== 0) {
localStorage.clear()
next('/login')
return
}
} catch (error) {
localStorage.clear()
next('/login')
return
}
}
// 检查权限
if (to.meta.roles && !to.meta.roles.includes(userRole)) {
if (to.meta.minMask !== undefined && !hasPermission(to.meta.minMask, userInfo.mask)) {
ElMessage.error('没有访问权限')
next('/admin/dashboard')
return

48
src/utils/permission.js Normal file
View file

@ -0,0 +1,48 @@
// 用户权限掩码
export const UserMask = {
Guest: -1,
User: 0,
Admin: 1,
SuperAdmin: 2
}
// 检查用户是否有权限
export function hasPermission(requiredMask, userMask) {
// 超级管理员拥有所有权限
if (userMask === UserMask.SuperAdmin) {
return true
}
// 管理员拥有除超级管理员外的所有权限
if (userMask === UserMask.Admin && requiredMask !== UserMask.SuperAdmin) {
return true
}
// 普通用户只能访问用户级别的功能
if (userMask === UserMask.User && requiredMask <= UserMask.User) {
return true
}
// 访客只能访问访客功能
if (userMask === UserMask.Guest && requiredMask === UserMask.Guest) {
return true
}
return false
}
// 获取用户角色标签
export function getUserRoleLabel(mask) {
switch (mask) {
case UserMask.SuperAdmin:
return '超级管理员'
case UserMask.Admin:
return '管理员'
case UserMask.User:
return '普通用户'
case UserMask.Guest:
return '访客'
default:
return '未知'
}
}

30
src/views/LoginView.vue
View file

@ -65,6 +65,7 @@ import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import { UserAPI } from '../api/user'
import { UserMask } from '@/utils/permission'
const router = useRouter()
const loginFormRef = ref(null)
@ -102,27 +103,32 @@ const handleLogin = async () => {
if (valid) {
loading.value = true
try {
const response = await UserAPI.login({
username: loginForm.value.username,
password: loginForm.value.password
})
const response = await UserAPI.login(loginForm.value)
if (response.retcode === 0) {
// 保存 用户信息
localStorage.setItem('token', JSON.stringify(response.data))
localStorage.setItem('isAuthenticated', 'true')
localStorage.setItem('userRole', 'admin')
// 获取用户信息
const userInfo = await UserAPI.getUserInfo()
if (userInfo.retcode === 0) {
localStorage.setItem('userRole', 'admin')
localStorage.setItem('userInfo', JSON.stringify(userInfo.data))
ElMessage.success('登录成功')
router.push('/dashboard')
const userInfoResponse = await UserAPI.getUserInfo()
if (userInfoResponse.retcode === 0) {
localStorage.setItem('userInfo', JSON.stringify(userInfoResponse.data))
// 根据用户权限决定跳转页面
if (userInfoResponse.data.mask >= UserMask.Admin) {
router.push('/admin/dashboard') // 管理员及以上跳转到概览页
} else {
router.push('/admin/events') // 普通用户跳转到事件记录页
}
ElMessage.success('登录成功')
}
} else {
ElMessage.error(response.message || '登录失败')
}
} catch (error) {
console.error('登录失败:', error)
ElMessage.error('登录失败，请重试')
} finally {
loading.value = false
}