登录联调

src/api/login.ts

@@ -0,0 +1,11 @@
+import { http } from "../utils/http"
+
+// 获取验证码
+export const getVerify = (): any => {
+  return http.request("get", "/captcha")
+}
+
+// 登录
+export const getLogin = (data: object): any => {
+  return http.request("post", "/login", data)
+}

src/main.ts

@@ -9,7 +9,7 @@ import ElementPlus from 'element-plus'
 import 'element-plus/lib/theme-chalk/index.css'
 
 // 导入公共样式
-import './assets/index.css'
+import "./assets/index.css"
 
 const app = createApp(App)
 

src/router/index.ts

@@ -34,7 +34,7 @@ const router = createRouter({
 const whiteList = ["/login", "/register"]
 
 router.beforeEach((to, _from, next) => {
-  whiteList.indexOf(to.path) !== -1 || storageSession.getItem("Token") ? next() : next("/login") // 全部重定向到登录页
+  whiteList.indexOf(to.path) !== -1 || storageSession.getItem("accessToken") ? next() : next("/login") // 全部重定向到登录页
 })
 
 export default router

src/views/home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div></div>
+  <div>Home</div>
 </template>
 
 <script lang='ts'>

src/views/login.vue

@@ -16,17 +16,23 @@ import {
   onBeforeMount,
   getCurrentInstance,
 } from "vue";
-import { http } from "../utils/http";
 import info, { ContextProps } from "../components/info.vue";
-
+import { getVerify, getLogin } from "../api/login";
+import { useRouter } from "vue-router";
+import { storageSession } from "../utils/storage";
 export default {
   components: {
     info,
   },
   setup() {
+    const message = getCurrentInstance()?.appContext.config.globalProperties
+      .$message;
+
+    const router = useRouter();
+
     // 刷新验证码
-    const getVerify = async () => {
+    const refreshGetVerify = async () => {
-      let { svg } = await http.request("get", "/captcha");
+      let { svg } = await getVerify();
       contextInfo.svg = svg;
     };
 
@@ -37,22 +43,40 @@ export default {
       svg: null,
     });
 
+    const toPage = (token: string): void => {
+      storageSession.setItem("accessToken", token);
+      router.push("/");
+    };
+
     // 登录
-    const onLogin = (): void => {
+    const onLogin = async () => {
-      console.log(contextInfo.userName);
+      let { userName, passWord, verify } = contextInfo;
+      let { code, info, accessToken } = await getLogin({
+        username: userName,
+        password: passWord,
+        verify: verify,
+      });
+      code === 0
+        ? message({
+            message: info,
+            type: "success",
+          }) && toPage(accessToken)
+        : message(info);
     };
 
     const refreshVerify = (): void => {
-      getVerify();
+      refreshGetVerify();
     };
 
     onBeforeMount(() => {
-      getVerify();
+      refreshGetVerify();
     });
 
     return {
       contextInfo,
       onLogin,
+      router,
+      toPage,
       refreshVerify,
     };
   },