From d7033a13b6118a38d223f7ade0deb64bafbbb6fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=90=8C=E7=8B=BC=E8=93=9D=E5=A4=A9?= <mllt9920@qq.com>
Date: Wed, 12 Mar 2025 17:50:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(auth):=20=E7=99=BB=E5=BD=95=E6=B3=A8?=
 =?UTF-8?q?=E5=86=8C=E9=80=80=E5=87=BA=E7=99=BB=E5=BD=95=E5=AE=8C=E6=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json              |   6 +-
 src/apis/api.js           |  26 ++++
 src/apis/apis_auth.js     |  10 ++
 src/apis/axios.js         |  40 ++++++
 src/pages/IndexPage.vue   |  47 ++++++-
 src/router/index.js       |   5 +
 src/store/index.js        |  29 +++++
 src/store/modules/user.js |  68 +++++++++++
 src/views/AuthView.vue    | 251 ++++++++++++++++++++++++++++++++++++++
 vite.config.js            |  22 +++-
 10 files changed, 498 insertions(+), 6 deletions(-)
 create mode 100644 src/apis/api.js
 create mode 100644 src/apis/apis_auth.js
 create mode 100644 src/apis/axios.js
 create mode 100644 src/store/index.js
 create mode 100644 src/store/modules/user.js

diff --git a/package.json b/package.json
index 40b7784..bef64fa 100644
--- a/package.json
+++ b/package.json
@@ -11,11 +11,15 @@
   "dependencies": {
     "@ant-design/icons-vue": "^7.0.1",
     "ant-design-vue": "^4.2.6",
+    "axios": "^1.8.2",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "vue3-slide-verify": "^1.1.6",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
+    "path": "^0.12.7",
     "vite": "^6.2.0"
   }
 }
diff --git a/src/apis/api.js b/src/apis/api.js
new file mode 100644
index 0000000..9ce9212
--- /dev/null
+++ b/src/apis/api.js
@@ -0,0 +1,26 @@
+
+// api.js
+import axiosInstance from './axios'; // 导入在axios.js中配置好的axios实例
+export default {
+
+}
+// 统一的get请求方法
+export function get(url, params = {}) {
+    return axiosInstance.get(url, { params });
+}
+
+// 统一的post请求方法
+export function post(url, data = {}) {
+    return axiosInstance.post(url, data);
+}
+
+// 统一的put请求方法（通常用于更新资源）
+export function put(url, data = {}) {
+    return axiosInstance.put(url, data);
+}
+
+// 统一的delete请求方法
+export function deleteRequest(url, params = {}) {
+    // 注意：axios的delete方法第二个参数是config对象，如果要传递参数，通常使用params
+    return axiosInstance.delete(url, { params });
+}
diff --git a/src/apis/apis_auth.js b/src/apis/apis_auth.js
new file mode 100644
index 0000000..13179d9
--- /dev/null
+++ b/src/apis/apis_auth.js
@@ -0,0 +1,10 @@
+import {post} from "./api.js";
+export function auth_reg(data) {
+    return post("/auth/register", data)
+}
+export function auth_login(data) {
+    return post("/auth/login", data)
+}
+export function auth_logout() {
+    return post("/auth/logout");
+}
diff --git a/src/apis/axios.js b/src/apis/axios.js
new file mode 100644
index 0000000..daa2796
--- /dev/null
+++ b/src/apis/axios.js
@@ -0,0 +1,40 @@
+import axios from 'axios';
+import store from '@/store';
+import router from '@/router';
+
+// 创建axios实例
+const service = axios.create({
+    baseURL: '/api', // api的base_url，可以在.env文件中配置
+    timeout: 5000, // 请求超时时间
+});
+
+// 请求拦截器
+service.interceptors.request.use(
+    (config) => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            config.headers['Authorization'] = 'Bearer ' + token;
+        }
+        return config;
+    },
+    (error) => {
+        // 处理请求错误
+        console.error(error); // for debug
+        return Promise.reject(error);
+    }
+);
+
+// 响应拦截器
+service.interceptors.response.use(
+    (response) => response.data,
+    (error) => {
+        if (error.response && error.response.status === 401) {
+            store.commit('user/CLEAR_SESSION');
+            router.push('/login?expired=1');
+        }
+        console.error('Error:', error); // 更清晰的错误日志输出
+        return Promise.reject(error);
+    }
+);
+
+export default service;
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index c857214..71f0be9 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -1,5 +1,35 @@
 <script setup>
-import {ref} from 'vue';
+import {computed, onMounted, ref} from 'vue';
+import store from "@/store/index.js";
+import {useRouter} from "vue-router";
+const router = useRouter();
+// 使用计算属性实时响应状态变化
+const isLogin = computed(() => {
+  return !!store.state.user.info
+})
+// 获取用户详细信息（可选）
+const userInfo = computed(() => store.state.user.info)
+const isAdmin = computed(() => store.state.user.info?.isAdmin || false)
+// 根据vuex判断用户是否已登录
+onMounted(async () => {
+  await store.dispatch('user/initialize')
+})
+
+const logout = () => {
+  // 调用 Vuex action
+  store.dispatch('user/logout')
+  // 带当前路径跳转到登录页
+  router.push({
+    path: '/auth',
+    // query: {
+    //   reason: 'logout',
+    //   redirect: router.currentRoute.value.fullPath
+    // }
+  })
+}
+
+
+
 // 书籍搜索
 const searchValue = ref('');
 const onSearch = searchValue => {
@@ -62,13 +92,19 @@ const handleBorrow = (book) => {
       <a-col :span="6">
         <div class="block01">
           <a-card class="card" v-if="isLogin">
-            <p class="c-title">个人</p>
+            <p class="c-title">{{userInfo["name"]}}            </p>
             <p>当前借书：</p>
             <p>逾期：</p>
+
+
+            <p style="text-align: center;">
+              <span class="inline-btn"><a-button type="primary">进入后台</a-button></span>
+              <span  class="inline-btn"><a-button  type="primary" danger @click="logout()">退出登录</a-button></span>
+            </p>
           </a-card>
           <a-card class="card" v-else>
             <p class="c-title">未登录</p>
-            <p>我要登录</p>
+            <p><router-link to="/auth">我要登录</router-link></p>
             <p>我要注册</p>
           </a-card>
         </div>
@@ -141,6 +177,7 @@ const handleBorrow = (book) => {
 
 .block01 .card {
   width: 100%;
+  height:200px;
   margin: auto;
 }
 
@@ -164,4 +201,8 @@ const handleBorrow = (book) => {
 .ant-col-18 {
   padding-left: 20px;
 }
+
+.inline-btn{
+  margin-left: 1em;
+}
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index 7d314ed..9916821 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -16,6 +16,11 @@ const routes = [
             },
         ]
     },
+    {
+    path: '/auth',
+    name: 'AuthView',
+    component: () => import('../views/AuthView.vue'),
+    }
 ];
 
 // 创建路由实例
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..5b1c1bc
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,29 @@
+// src/store/index.js
+
+import { createStore } from 'vuex'
+import userModule from './modules/user' // 用户模块
+
+// 创建 Vuex 存储实例
+const store = createStore({
+    // 组合各个模块
+    modules: {
+        user: userModule // 注册用户模块（带命名空间）
+    },
+
+    // 全局状态（可选）
+    state: {
+        appName: 'libroro'
+    },
+
+    // 全局 mutations（可选）
+    mutations: {
+        SET_APP_NAME(state, name) {
+            state.appName = name
+        }
+    },
+
+    // 严格模式（仅开发环境）
+    strict: process.env.NODE_ENV !== 'production'
+})
+
+export default store
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
new file mode 100644
index 0000000..8c1d792
--- /dev/null
+++ b/src/store/modules/user.js
@@ -0,0 +1,68 @@
+import service from '@/apis/axios';
+import axios from 'axios';
+import {auth_logout} from "@/apis/apis_auth.js";
+
+export default {
+    namespaced: true,
+    state: () => ({
+        info: null,
+        lastLogin: null,
+        refreshTimer: null,
+    }),
+    mutations: {
+        SET_USER_INFO(state, payload) {
+            state.info = {
+                ...payload,
+                isAdmin: payload.role === 'admin',
+            };
+            state.lastLogin = new Date().toISOString();
+        },
+        CLEAR_SESSION(state) {
+            state.info = null;
+            state.lastLogin = null;
+            localStorage.removeItem('userInfo');
+            if (state.refreshTimer) {
+                clearTimeout(state.refreshTimer);
+                state.refreshTimer = null;
+            }
+        },
+    },
+    actions: {
+        async initialize({ commit }) {
+            try {
+                const rawData = localStorage.getItem('userInfo');
+                if (rawData) {
+                    const data = JSON.parse(rawData);
+                    commit('SET_USER_INFO', {
+                        ...data,
+                        token: data.token ? atob(data.token) : null,
+                    });
+                }
+            } catch (err) {
+                console.error('初始化用户状态失败:', err);
+                commit('CLEAR_SESSION'); // 直接调用 mutation 而不是 dispatch
+            }
+        },
+        CLEAR_SESSION({ commit }) {
+            commit('CLEAR_SESSION');
+            localStorage.removeItem('userInfo');
+        },
+        async logout({commit}) {
+            //向后端发起退出登录的请求
+            try {
+                await auth_logout(); // 调用退出登录API
+            } catch (err) {
+                console.error('退出登录失败:', err);
+            }
+
+            localStorage.removeItem('userInfo');
+            delete service.defaults.headers.common['Authorization'];
+            commit('CLEAR_SESSION');
+
+            // 取消所有 pending 请求（可选）
+            const CancelToken = axios.CancelToken;
+            const source = CancelToken.source();
+            source.cancel('用户主动退出登录');
+        },
+    },
+};
diff --git a/src/views/AuthView.vue b/src/views/AuthView.vue
index 5176044..560f38f 100644
--- a/src/views/AuthView.vue
+++ b/src/views/AuthView.vue
@@ -1,11 +1,262 @@
 <script setup>
+import { ref, reactive } from 'vue';
+import { message } from 'ant-design-vue';
+import SlideVerify from 'vue3-slide-verify'; // 需要先安装 vue3-slide-verify
+import "vue3-slide-verify/dist/style.css";
+import {auth_login, auth_reg} from "../apis/apis_auth.js";
+import {useRouter} from "vue-router";
+import store from '@/store'
+// 表单状态
+const activeKey = ref('login');
+const loginForm = reactive({ username: '', password: '' });
+const registerForm = reactive({
+  username: '',
+  password: '',
+  confirmPassword: ''
+});
+const router = useRouter()
+// 滑动验证状态
+const isVerified = ref(false);
 
+// 表单校验规则
+const loginRules = {
+  username: [{ required: true, message: '请输入账号' }],
+  password: [{ required: true, message: '请输入密码' }]
+};
+
+const registerRules = {
+  username: [{ required: true, message: '请输入账号' }],
+  password: [{ required: true, message: '请输入密码' }],
+  confirmPassword: [
+    { required: true, message: '请确认密码' },
+    {
+      validator: async (rule, value) => {
+        return value === registerForm.password;
+      },
+      message: '两次输入的密码不一致'
+    }
+  ]
+};
+
+// 滑动验证成功回调
+const onVerifySuccess = () => {
+  isVerified.value = true;
+  message.success('验证成功');
+};
+// 格式化时间显示
+const formatTime = (isoString) => {
+  if (!isoString) return '-';
+  try {
+    const date = new Date(isoString);
+    return date.toLocaleString('zh-CN');
+  } catch (e) {
+    return '-';
+  }
+};
+// 辅助函数：安全路径验证
+const validateRedirectPath = (path) => {
+  if (!path) return false;
+  try {
+    const fullPath = new URL(path, window.location.origin).pathname;
+    return fullPath.startsWith('/') && !path.includes('//');
+  } catch {
+    return false;
+  }
+};
+// 提交处理
+const handleLogin = () => {
+  if (!isVerified.value) {
+    message.warning('请先完成验证');
+    return;
+  }
+  if(loginForm.username===""){
+    message.warning('请填写账号');
+    return;
+  }
+  if(loginForm.password===""){
+    message.warning('请填写密码');
+    return;
+  }
+  auth_login(loginForm).then(async (res) => {
+    if (res.code === 200) {
+      message.success("登录成功")
+      // 缓存用户信息
+      const data = res.data;
+      // 用户信息处理
+      const userInfo = {
+        token: btoa(data.access_token),
+        username: data.username,
+        name: data.name,
+        role: data.role,
+        loginTime: formatTime(data.loginTime), // 转换为本地时间格式
+        createTime: formatTime(data.createTime)
+      };
+      // 缓存用户信息（建议使用Vuex + localStorage方案）
+      // 使用localStorage存储
+      localStorage.setItem('userInfo', JSON.stringify({
+        ...userInfo,
+        // 存储原始ISO时间用于后续操作
+        rawLoginTime: data.loginTime,
+        rawCreateTime: data.createTime
+      }));
+
+      // 更新Vuex状态
+      store.commit('user/SET_USER_INFO', {
+        ...userInfo,
+        // 添加响应式时间格式化
+        loginTime: formatTime(userInfo.rawLoginTime),
+        createTime: formatTime(userInfo.rawCreateTime)
+      });
+
+      // 安全跳转处理
+      const redirectPath = router.currentRoute.value.query.redirect;
+      const isValidPath = validateRedirectPath(redirectPath); // 路径验证函数
+      const targetPath = isValidPath ? redirectPath : '/';
+
+      // 显示反馈后跳转
+      message.success('登录成功，正在跳转...');
+      await router.push(targetPath);
+      // 跳转
+    } else {
+      message.warning(res.msg)
+    }
+  }).catch((err) => {
+    // 统一错误处理
+    console.error('登录异常:', err);
+    message.error(`登录失败: ${err.message || '未知错误'}`);
+  })
+};
+
+const handleRegister = () => {
+  if (!isVerified.value) {
+    message.warning('请先完成验证');
+    return;
+  }
+  // 1 是否填写账号密码
+  if (registerForm.username === ""){
+    message.warning('请填写账号');
+    return;
+  }
+  if (registerForm.password === ""){
+    message.warning('请填写密码');
+    return;
+  }
+  // 2 密码是否正确
+  if (registerForm.password !==registerForm.confirmPassword) {
+    message.warning("两次输入的密码不一致")
+    return;
+  }
+  // 3 发起注册请求
+  auth_reg(registerForm).then((res) => {
+    if(res.code === 200){
+      message.success("注册成功")
+      this.activeKey = "login";
+      registerForm.username = "";
+      registerForm.password = "";
+      registerForm.confirmPassword = "";
+    }else{
+      message.warning(res.msg)
+    }
+  })
+};
 </script>
 
 <template>
+  <div class="auth-container">
+    <a-card class="auth-card">
+      <a-tabs v-model:activeKey="activeKey" centered>
+        <!-- 登录标签页 -->
+        <a-tab-pane key="login" tab="登录">
+          <a-form
+              :model="loginForm"
+              :rules="loginRules"
+              @finish="handleLogin"
+              layout="vertical"
+          >
+            <a-form-item label="账号" name="username">
+              <a-input v-model:value="loginForm.username" />
+            </a-form-item>
 
+            <a-form-item label="密码" name="password">
+              <a-input-password v-model:value="loginForm.password" />
+            </a-form-item>
+
+            <slide-verify
+                @success="onVerifySuccess"
+                slider-text="向右滑动验证"
+            />
+
+            <a-button
+                type="primary"
+                html-type="submit"
+                block
+                class="submit-btn"
+            >
+              登录
+            </a-button>
+          </a-form>
+        </a-tab-pane>
+
+        <!-- 注册标签页 -->
+        <a-tab-pane key="register" tab="注册">
+          <a-form
+              :model="registerForm"
+              :rules="registerRules"
+              @finish="handleRegister"
+              layout="vertical"
+          >
+            <a-form-item label="账号" name="username">
+              <a-input v-model:value="registerForm.username" />
+            </a-form-item>
+
+            <a-form-item label="密码" name="password">
+              <a-input-password v-model:value="registerForm.password" />
+            </a-form-item>
+
+            <a-form-item label="确认密码" name="confirmPassword">
+              <a-input-password v-model:value="registerForm.confirmPassword" />
+            </a-form-item>
+
+            <slide-verify
+                @success="onVerifySuccess"
+                slider-text="向右滑动验证"
+            />
+
+            <a-button
+                type="primary"
+                html-type="submit"
+                block
+                class="submit-btn"
+            >
+              注册
+            </a-button>
+          </a-form>
+        </a-tab-pane>
+      </a-tabs>
+    </a-card>
+  </div>
 </template>
 
 <style scoped>
+.auth-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: #f0f2f5;
+}
 
+.auth-card {
+  width: 400px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.submit-btn {
+  margin-top: 24px;
+}
+
+:deep(.ant-tabs-nav) {
+  margin-bottom: 24px;
+}
 </style>
diff --git a/vite.config.js b/vite.config.js
index bbcf80c..dcb6c01 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,25 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-
-// https://vite.dev/config/
+import { resolve } from 'path' // npm install path --save-dev
+// vite.config.js
 export default defineConfig({
   plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')  // 设置 @ 指向 src 目录
+    }
+  },
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:10300',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '/api'), // 保持路径不变
+        secure: false,
+        ws: true
+      }
+    }
+  }
 })