11

src/router1.js

@@ -0,0 +1,126 @@
+import {
+    createRouter,
+    createWebHistory
+} from 'vue-router';
+import {
+    userStore,
+    useExpressStore
+} from './store';
+import {
+    ElMessage
+} from 'element-plus';
+
+
+import request from "./request"
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [{
+        path: "/",
+        redirect: "login"
+    },
+        {
+            path: '/login',
+            name: 'Login',
+            component: () => import("./view/login.vue")
+        },
+        {
+            path: "/register",
+            name: "Register",
+            component: () => import("./view/register.vue")
+        },
+        {
+            path: '/user',
+            name: 'User',
+            redirect: localStorage.getItem("isAdmin") ? '/user/expressList' : '/user/myInfo',
+            component: () => import("./view/user/index.vue"),
+            children: [{
+                path: 'myInfo',
+                component: () => import("./view/user/MyInfo.vue"),
+            },
+                {
+                    path: 'expressList',
+                    component: () => import("./view/user/ExpressList.vue"),
+                },
+                {
+                    path: 'expressForm',
+                    component: () => import("./view/user/ExpressForm.vue"),
+                },
+                {
+                    path: "signed",
+                    component: () => import("./view/user/SignedList.vue"),
+                }
+            ]
+        },
+    ]
+});
+
+router.beforeEach((to, from, next) => {
+    const userStore_ = userStore()
+    if (to.name === 'Login' || to.name === "Register") {
+        next();
+    } else {
+        const token = localStorage.getItem("token")
+        if (token) {
+            //重新请求express
+            const expressStore = useExpressStore()
+            request({
+                method: "get",
+                url: "/express",
+            }).then(({
+                         data
+                     }) => {
+                if (data.code === 0) {
+                    expressStore.setExpress(data.data)
+                    console.log(data.data, "重新设置express成功")
+
+                }
+            })
+
+            //有秘钥，重新请求userInfo
+            request({
+                method: "get",
+                url: "/user/whoami",
+            }).then(({
+                         data
+                     }) => {
+                //获取用户信息
+                if (data.code === 0) {
+                    //重新设置信息
+                    userStore_.setUserInfo(data.data)
+                    //重新设置秘钥
+                    userStore_.setToken(token)
+                    userStore_.setAdmin(localStorage.getItem("isAdmin"))
+
+                    console.log("重新响应成功", data.data)
+                    if (localStorage.getItem("isAdmin") && token.name === "User") {
+                        next({
+                            path: "/user/expressList"
+                        })
+                    } else {
+                        next()
+                    }
+                } else {
+                    //获取失败，秘钥过期
+                    ElMessage({
+                        message: "登录已过期,请重新登录",
+                        type: "error"
+                    })
+                    //将过期的token删除
+                    localStorage.removeItem("token")
+                    next({
+                        name: "Login"
+                    })
+                }
+            })
+            //有秘钥就通过
+        } else {
+            next({
+                name: "Login"
+            })
+        }
+    }
+})
+
+
+export default router;

src/view/register1.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="body-view">
+    <el-text class="title">注册</el-text>
+    <el-form class="form-view" @submit.prevent="handleRegister">
+      <el-form-item label="账号:" :error="usernameError">
+        <el-input v-model="username" placeholder="请输入账号" class="ipt" @input="validateUsername"></el-input>
+      </el-form-item>
+      <el-form-item label="密码:" :error="passwordError">
+        <el-input type="password" v-model="password" placeholder="请输入密码" class="ipt"
+                  @input="validatePassword"></el-input>
+      </el-form-item>
+      <el-form-item label="确认密码:" :error="confirmPasswordError">
+        <el-input type="password" v-model="confirmPassword" placeholder="请再次输入密码" class="ipt"
+                  @input="validateConfirmPassword"></el-input>
+      </el-form-item>
+
+      <el-form-item>
+        <el-checkbox v-model="isAdminRef">
+          <span class="checkbox-label">我是快递员</span>
+        </el-checkbox>
+      </el-form-item>
+
+      <el-form-item>
+        <el-checkbox v-model="isAgreed">
+          <span class="checkbox-label">我已阅读并同意《用户协议》</span>
+        </el-checkbox>
+      </el-form-item>
+
+      <el-form-item class="btn-view">
+        <div class="button-container">
+          <el-button class="btn" type="primary" @click="handleRegister"
+                     :disabled="!isAgreed || !canRegister">注册</el-button>
+          <el-button class="btn cancel-btn" type="primary" @click="goToLogin">返回登录</el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { ElMessage } from 'element-plus';
+import { useRouter } from 'vue-router';
+import req from '../request';
+
+
+const username = ref('');
+const password = ref('');
+const confirmPassword = ref('');
+const isAgreed = ref(false);
+
+const usernameError = ref('');
+const passwordError = ref('');
+const confirmPasswordError = ref('');
+const isAdminRef = ref(false);
+
+const router = useRouter();
+
+// 检测账号是否已存在
+const isUsernameUnique = () => {
+  const accounts = JSON.parse(localStorage.getItem('accounts') || '[]');
+  return !accounts.some(account => account.username === username.value);
+};
+
+// 验证账号（长度至少8，包含字母和数字，且唯一）
+const validateUsername = () => {
+
+  if (!isUsernameUnique()) {
+    usernameError.value = '该账号已存在，请选择其他账号';
+    return false;
+  }
+  usernameError.value = '';
+  return true;
+};
+
+// 验证密码（长度至少8，包含字母和数字，满足中级强度）
+const validatePassword = () => {
+  if (password.value.length < 8) {
+    passwordError.value = '密码长度至少为8位';
+    return false;
+  }
+  if (!/[a-zA-Z]/.test(password.value) || !/\d/.test(password.value)) {
+    passwordError.value = '密码必须包含字母和数字';
+    return false;
+  }
+  passwordError.value = '';
+  return true;
+};
+
+// 验证确认密码
+const validateConfirmPassword = () => {
+  if (confirmPassword.value !== password.value) {
+    confirmPasswordError.value = '两次输入的密码不一致';
+    return false;
+  }
+  confirmPasswordError.value = '';
+  return true;
+};
+
+// 计算属性：注册按钮的可用状态
+const canRegister = computed(() => validateUsername() && validatePassword() && validateConfirmPassword());
+
+// 处理注册
+const handleRegister = () => {
+  if (canRegister.value) {
+    // 保存账号和密码到 localStorage
+    const data = {
+      loginId: username.value,
+      loginPwd: password.value
+    }
+    if (isAdminRef.value) {
+      data.isAdmin = true
+    }
+    req({
+      method: "POST",
+      url: "/user",
+      data
+    }).then((res) => {
+      ElMessage.success('注册成功！请返回登录');
+      router.push('/login'); // 使用 Vue Router 跳转到 /login 路由
+    })
+
+  } else {
+    ElMessage.error('请确保填写正确的信息');
+  }
+};
+
+
+// 返回登录视图
+const goToLogin = () => {
+  router.push('/login'); // 使用 Vue Router 跳转到 /login 路由
+};
+
+</script>
+
+<style>
+.body-view {
+  background-color: #f7f9fc;
+  border-radius: 12px;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  width: 400px;
+  padding: 40px;
+  margin: 60px auto;
+}
+
+.title {
+  font-size: 32px;
+  font-weight: bold;
+  color: #007bff;
+  text-align: center;
+  margin-bottom: 25px;
+}
+
+.ipt {
+  border: 1px solid #ced4da;
+  height: 50px;
+  border-radius: 8px;
+  transition: border-color 0.3s;
+}
+
+.ipt:focus {
+  border-color: #007bff;
+  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+}
+
+.button-container {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.btn {
+  height: 50px;
+  width: 100px;
+  background-color: #007bff;
+  border: none;
+  color: white;
+  margin: 0 30px;
+  font-size: 16px;
+  border-radius: 8px;
+  transition: background-color 0.3s;
+}
+
+.btn:hover {
+  background-color: #0056b3;
+}
+
+.btn-view {
+  margin-top: 30px;
+  text-align: center;
+}
+
+.checkbox-label {
+  font-size: 14px;
+}
+
+.el-checkbox {
+  margin-bottom: 5px;
+}
+</style>