1.添加相应路由

2.添加拦截请求

src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-console.log(import.meta.env)
+import router from './plugins/router'
+router.push('/home')
 </script>
 
 <template>

src/components/auth/login.vue

@@ -1,7 +1,79 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+const form = reactive({
+  name: '',
+  paw: '',
+})
+const rules = reactive({
+  name: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
+  ],
+  paw: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
+  ],
+})
+const formRef = ref()
+const bt_login = async (formEl: any) => {
+  formEl.validate((valid: boolean, e: any) => {
+    if (valid) {
+      console.log(form)
+    } else {
+      console.log('error submit!!')
+      return false
+    }
+  })
+}
+</script>
 
 <template>
-  <h1>login</h1>
+  <el-carousel height="230px">
+    <el-carousel-item>
+      <el-image style="width: 360px; height: 98%"
+                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
+    </el-carousel-item>
+    <el-carousel-item>
+      <el-image style="width: 360px; height: 98%"
+                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
+    </el-carousel-item>
+
+  </el-carousel>
+  <el-divider />
+  <el-form ref="formRef"
+           :model="form"
+           :rules="rules"
+           label-position="top">
+    <el-form-item label="用户名"
+                  prop="name">
+      <el-input v-model="form.name"
+                style="width:98%;"
+                placeholder="请输入用户名"></el-input>
+    </el-form-item>
+    <el-form-item label="密码"
+                  prop="paw">
+      <el-input v-model="form.paw"
+                placeholder="请输入密码"
+                style="width:98%;"
+                type="password"></el-input>
+    </el-form-item>
+    <el-form-item>
+
+    </el-form-item>
+  </el-form>
+  <el-divider />
+  <!-- 快捷登录 -->
+  <div>
+    <el-button type="primary"
+               style="width:98%;"
+               @click="bt_login(formRef.value)">
+      登陆
+    </el-button>
+    <el-button type="text"
+               id="to_register"
+               style="float:right;">没有账号？去注册</el-button>
+  </div>
+
 </template>
 
 <style scoped lang="scss">

src/components/auth/register.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import { FormInstance, FormRules, ElMessage } from 'element-plus'
+import service from '../../plugins/axios'
 import { reactive, ref } from 'vue'
+
 let ressuccess = ''
 const codvisible = ref(false)
 const bt_disabled = ref(false)
@@ -7,26 +10,101 @@ function codsuccess(success: string) {
   codvisible.value = false
   bt_disabled.value = true
   ressuccess = success
+  form.cod = '✅验证通过'
 }
 const form = reactive({
   name: '',
+  emali: '',
   paw: '',
   paw1: '',
+  cod: '',
+})
+const rules = reactive<FormRules>({
+  name: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
+  ],
+  emali: [
+    { required: true, message: '请输入邮箱', trigger: 'blur' },
+    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
+    {
+      type: 'email',
+      message: '请输入正确的邮箱地址',
+      trigger: ['blur', 'change'],
+    },
+  ],
+  paw: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
+  ],
+  paw1: [
+    { required: true, message: '请再次输入密码', trigger: 'blur' },
+    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
+    {
+      validator: (rule, value, callback) => {
+        if (value !== form.paw) {
+          callback(new Error('两次输入密码不一致!'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur',
+    },
+  ],
+  cod: [{ required: true, message: '请点击按钮进行验证', trigger: 'change' }],
 })
+const formRef = ref<FormInstance>()
+const bt_resgister = async (formEl: FormInstance | undefined) => {
+  formEl?.validate((valid, e) => {
+    if (valid) {
+      service({
+        url: 'auth/register',
+        method: 'post',
+        headers: {
+          'Content-Type': 'application/json',
+          cod: ressuccess,
+        },
+        data: {
+          name: form.name,
+          emali: form.emali,
+          paw: form.paw,
+        },
+      })
+        .then((res) => {
+          console.log(res)
+          localStorage.setItem('token', res.data.token)
+          ElMessage.success('注册成功')
+        })
+        .catch((err) => {
+          ElMessage.error(err.message)
+        })
+    }
+  })
+}
 </script>
 
 <template>
   <el-card class="box-card register">
-    <el-form :model="form"
-             label-position="top">
-      <el-form-item label="用户名">
+    <el-form ref="formRef"
+             :model="form"
+             label-position="top"
+             :rules="rules">
+      <el-form-item label="用户名"
+                    prop="name">
         <el-input v-model="form.name" />
       </el-form-item>
-      <el-form-item label="密码">
+      <el-form-item label="邮箱"
+                    prop="emali">
+        <el-input type="email"
+                  v-model="form.emali" />
+      </el-form-item>
+      <el-form-item label="密码"
+                    prop="paw">
         <el-input type="password"
                   v-model="form.paw" />
       </el-form-item>
-      <el-form-item label="确认密码">
+      <el-form-item label="确认密码"
+                    prop="paw1">
         <el-input type="password"
                   v-model="form.paw1" />
       </el-form-item>
@@ -37,7 +115,11 @@ const form = reactive({
                    href="#">《用户协议》</el-link>
         </el-checkbox>
       </el-form-item>
-      <el-form-item label="验证码">
+      <el-form-item label="验证码"
+                    prop="cod">
+        <el-input type="password"
+                  v-model="form.cod"
+                  style="display:none" />
         <el-popover placement="top"
                     :width="330"
                     :visible="codvisible">
@@ -64,7 +146,8 @@ const form = reactive({
     </el-form>
     <el-divider />
     <el-button type="primary"
-               style="width:100%;">注册</el-button>
+               style="width:100%;"
+               @click="bt_resgister(formRef)">注册</el-button>
     <br>
     <div>
       <el-button type="text"

src/components/header/hleft.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { useDark, useToggle } from '@vueuse/core'
 import { Sunny, Moon } from '@element-plus/icons-vue'
-
+import router from '../../plugins/router'
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
+const to_login = async () => {
+  await router.push('/auth')
+}
 </script>
 
 <template>
@@ -15,7 +18,7 @@ const toggleDark = useToggle(isDark)
                inline-prompt
                :active-icon="Moon"
                :inactive-icon="Sunny" />
-    <el-button>登陆/注册</el-button>
+    <el-button @click="to_login">登陆/注册</el-button>
   </el-space>
 
 </template>

src/components/header/hright.vue

@@ -11,10 +11,12 @@ const drawer = ref(false)
 </script>
 
 <template>
-  <el-image style="width: 100px; height: 50px"
-            :src="url"
-            class="hidden-sm-and-down"
-            fit="fit" />
+  <router-link to="/home">
+    <el-image style="width: 100px; height: 50px"
+              :src="url"
+              class="hidden-sm-and-down"
+              fit="fit" />
+  </router-link>
   <el-button type=""
              class="hidden-md-and-up"
              @click="drawer = true">

src/layouts/auth.vue

@@ -16,7 +16,7 @@ onMounted(() => {
       avatar.style.opacity = '1'
       avatar.style.zIndex = '2'
       avatar.style.transform = 'scale(1.2)'
-      avatar.style.transition = 'all 1s'
+      avatar.style.transition = 'all .5s'
     }
   }
   function avatar_leave() {
@@ -24,7 +24,7 @@ onMounted(() => {
       avatar.style.top = '80px'
       avatar.style.opacity = '0'
       avatar.style.transform = 'scale(1.1)'
-      avatar.style.transition = 'all 1s'
+      avatar.style.transition = 'all .5s'
     }
   }
   register.addEventListener('mouseenter', avatar_move)
@@ -36,11 +36,11 @@ onMounted(() => {
   })
   function card_move(e: MouseEvent) {
     const target = e.target as HTMLElement
-    target.style.transform = 'translateX(30px)'
+    target.style.transform = 'translateX(25px)'
   }
   function card_leave(e: MouseEvent) {
     const target = e.target as HTMLElement
-    target.style.transform = 'translateX(15px)'
+    target.style.transform = 'translateX(10px)'
   }
   login.addEventListener('mouseenter', card_move)
   login.addEventListener('mouseleave', card_leave)
@@ -52,7 +52,7 @@ onMounted(() => {
       target.removeEventListener('mouseenter', card_move)
       target.removeEventListener('mouseleave', card_leave)
       target.style.transform = 'translateX(0px)'
-      register.style.transform = 'translateX(30px)'
+      register.style.transform = 'translateX(20px)'
       register.style.paddingRight = '30px'
       target.style.paddingRight = '20px'
       register.addEventListener('mouseenter', card_move)
@@ -66,7 +66,7 @@ onMounted(() => {
       target.removeEventListener('mouseenter', card_move)
       target.removeEventListener('mouseleave', card_leave)
       target.style.transform = 'translateX(0px)'
-      login.style.transform = 'translateX(30px)'
+      login.style.transform = 'translateX(20px)'
       login.style.paddingRight = '30px'
       target.style.paddingRight = '20px'
       login.addEventListener('mouseenter', card_move)
@@ -82,6 +82,9 @@ onMounted(() => {
     login.click()
     avatar_leave()
   })
+  document.getElementById('to_register')?.addEventListener('click', () => {
+    register.click()
+  })
 })
 </script>
 
@@ -113,13 +116,13 @@ onMounted(() => {
 .login {
   position: absolute;
   top: 0;
-  transform: translateX(15px);
+  padding-right: 25px;
   z-index: -1;
-  transition: all 1s;
+  transition: all 0.5s;
 }
 .register {
   position: relative;
-  transition: all 1s;
+  transition: all 0.5s;
 }
 
 #avatar {
@@ -133,7 +136,7 @@ onMounted(() => {
 }
 .box-card {
   min-width: 400px;
-  height: 500px;
+  min-height: 570px;
   margin-top: 50px;
   padding-top: 50px;
 }

src/plugins/axios.ts

@@ -1,4 +1,6 @@
 import axios from "axios";
+import { ElMessage } from "element-plus";
+import router from "./router";
 //axios封装
 const service = axios.create({
   baseURL: "http://localhost:3000",
@@ -6,12 +8,30 @@ const service = axios.create({
 });
 //请求拦截器
 service.interceptors.request.use((config) => {
-  //在发送请求之前做某事
   return config;
 });
 //响应拦截器
-service.interceptors.response.use((response) => {
-  //对响应数据做些事
-  return response;
-});
+service.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  (error) => {
+    const { status, data } = error.response;
+    switch (status) {
+      case 401:
+        ElMessage.error("token失效，请重新登录");
+        router.push("/auth");
+        break;
+      case 403:
+        ElMessage.error("没有权限，请联系管理员");
+        break;
+      case 404:
+        ElMessage.error("请求资源不存在");
+        break;
+      default:
+        ElMessage.error(data.message);
+    }
+    return Promise.reject(error);
+  }
+);
 export default service;

src/views/home/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref, VNodeRef } from 'vue'
 import { encrypt, decrypt } from '../../plugins/crypto'
-import { ElMessage } from 'element-plus'
+
 import service from '../../plugins/axios'
 const successcod = async (success: string) => {
   const res = await service.post('cod/verifycod', {
@@ -13,8 +13,7 @@ const successcod = async (success: string) => {
 </script>
 
 <template>
-  <el-empty description="没有内容哦" />
-  <button @click="ElMessage('text')">tx</button>
+  主页
 </template>
 
 <style scoped>