支持电子邮件登录注册

优化登录成功跳转逻辑细化前端页面权限
2024-12-01 17:37:34 +08:00 · 2024-12-01 16:45:35 +08:00
6 changed files with 160 additions and 112 deletions
--- a/src/api/user.js
+++ b/src/api/user.js
@ -13,9 +13,9 @@ export const UserAPI = {

  /**
   * 用户登录
-   * @param {Object} data 登录信息
-   * @param {string} data.username 用户名
-   * @param {string} data.password 密码
+   * @param {Object} data
+   * @param {string} data.username - 用户名或邮箱
+   * @param {string} data.password - 密码
   */
  login(data) {
    return request.post('/user/login', data)
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@ -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')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -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
--- a/src/utils/permission.js
+++ b/src/utils/permission.js
@ -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 '未知'
+  }
+} 
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@ -15,10 +15,10 @@
        label-width="100px"
        @keyup.enter="handleLogin">
        
-        <el-form-item label="管理员账号" prop="username">
+        <el-form-item label="账号" prop="username">
          <el-input 
            v-model="loginForm.username"
-            placeholder="请输入管理员账号"
+            placeholder="请输入用户名或邮箱"
            :prefix-icon="User"
            clearable />
        </el-form-item>
@ -39,14 +39,8 @@
          @click="handleLogin">
          登录
        </el-button>
-        <div class="guest-login">
-          <el-button 
-            type="info" 
-            link
-            @click="handleGuestLogin">
-            游客登录>>
-          </el-button>
-          <el-divider direction="vertical" />
+
+        <div class="form-footer">
          <el-button 
            type="primary" 
            link
@ -65,6 +59,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)
@ -77,8 +72,8 @@ const loginForm = ref({

 const loginRules = {
  username: [
-    { required: true, message: '请输入管理员账号', trigger: 'blur' },
-    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
+    { required: true, message: '请输入用户名或邮箱', trigger: 'blur' },
+    { min: 3, message: '长度不能小于3个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入登录密码', trigger: 'blur' },
@ -86,14 +81,6 @@ const loginRules = {
  ]
 }

-// 游客登录处理
-const handleGuestLogin = () => {
-  localStorage.setItem('isAuthenticated', 'true')
-  localStorage.setItem('userRole', 'guest')
-  router.push('/dashboard')
-  ElMessage.success('游客登录成功')
-}
-
 // 管理员登录处理
 const handleLogin = async () => {
  if (!loginFormRef.value) return
@ -106,23 +93,31 @@ const handleLogin = async () => {
          username: loginForm.value.username,
          password: loginForm.value.password
        })
-
        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
      }
@ -154,6 +149,8 @@ const handleRegister = () => {
  margin: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+  backdrop-filter: blur(8px);
+  background-color: rgba(255,255,255,0.6);
 }

 .login-header {
@ -192,17 +189,8 @@ const handleRegister = () => {
  white-space: nowrap;
 }

-.guest-login {
+.form-footer {
  text-align: center;
  margin-top: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-
-.form-footer {
-  padding: 0 0 0 100px;  /* 左内边距与label宽度相同 */
-  margin-top: 20px;
 }
 </style> 
--- a/src/views/RegisterView.vue
+++ b/src/views/RegisterView.vue
@ -4,7 +4,7 @@
      <template #header>
        <div class="register-header">
          <img src="../assets/logo.png" alt="logo" class="register-logo">
-          <h2>用户注册</h2>
+          <h2>注册账号</h2>
        </div>
      </template>
      
@ -12,8 +12,7 @@
        ref="registerFormRef"
        :model="registerForm"
        :rules="registerRules"
-        label-width="100px"
-        @keyup.enter="handleRegister">
+        label-width="100px">
        
        <el-form-item label="用户名" prop="username">
          <el-input 
@ -31,6 +30,14 @@
            clearable />
        </el-form-item>

+        <el-form-item label="电子邮件" prop="email">
+          <el-input 
+            v-model="registerForm.email"
+            placeholder="请输入电子邮件"
+            :prefix-icon="Message"
+            clearable />
+        </el-form-item>
+
        <el-form-item label="密码" prop="password">
          <el-input 
            v-model="registerForm.password"
@ -56,13 +63,13 @@
          @click="handleRegister">
          注册
        </el-button>
-        <div class="login-link">
-          已有账号？
+
+        <div class="form-footer">
          <el-button 
            type="primary" 
            link
            @click="router.push('/login')">
-            立即登录
+            返回登录
          </el-button>
        </div>
      </el-form>
@ -74,7 +81,7 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { User, UserFilled, Lock } from '@element-plus/icons-vue'
+import { User, UserFilled, Lock, Message } from '@element-plus/icons-vue'
 import { UserAPI } from '../api/user'

 const router = useRouter()
@ -84,26 +91,18 @@ const loading = ref(false)
 const registerForm = ref({
  username: '',
  nickname: '',
+  email: '',
  password: '',
  confirmPassword: ''
 })

-const validatePass = (rule, value, callback) => {
-  if (value === '') {
-    callback(new Error('请输入密码'))
-  } else {
-    if (registerForm.value.confirmPassword !== '') {
-      registerFormRef.value.validateField('confirmPassword')
-    }
-    callback()
-  }
-}
-
-const validatePass2 = (rule, value, callback) => {
-  if (value === '') {
-    callback(new Error('请再次输入密码'))
-  } else if (value !== registerForm.value.password) {
-    callback(new Error('两次输入密码不一致!'))
+// 邮箱验证规则
+const validateEmail = (rule, value, callback) => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  if (!value) {
+    callback(new Error('请输入电子邮件'))
+  } else if (!emailRegex.test(value)) {
+    callback(new Error('请输入有效的电子邮件地址'))
  } else {
    callback()
  }
@ -118,12 +117,25 @@ const registerRules = {
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
+  email: [
+    { required: true, validator: validateEmail, trigger: 'blur' }
+  ],
  password: [
-    { validator: validatePass, trigger: 'blur' },
+    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ],
  confirmPassword: [
-    { validator: validatePass2, trigger: 'blur' }
+    { required: true, message: '请再次输入密码', trigger: 'blur' },
+    {
+      validator: (rule, value, callback) => {
+        if (value !== registerForm.value.password) {
+          callback(new Error('两次输入的密码不一致'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur'
+    }
  ]
 }

@ -137,15 +149,19 @@ const handleRegister = async () => {
        const response = await UserAPI.register({
          username: registerForm.value.username,
          nickname: registerForm.value.nickname,
+          email: registerForm.value.email,
          password: registerForm.value.password
        })
        
        if (response.retcode === 0) {
-          ElMessage.success('注册成功，请登录')
+          ElMessage.success('注册成功')
          router.push('/login')
+        } else {
+          ElMessage.error(response.message || '注册失败')
        }
      } catch (error) {
        console.error('注册失败:', error)
+        ElMessage.error('注册失败，请重试')
      } finally {
        loading.value = false
      }
Author	SHA1	Message	Date
root	c26a5fdcb3	支持电子邮件登录注册	2024-12-01 17:37:34 +08:00
root	5d7a8d7f5c	优化登录成功跳转逻辑细化前端页面权限	2024-12-01 16:45:35 +08:00