登录

src/api/Api.js

@@ -29,7 +29,6 @@ function interceptorErr(err) {
 function showError(err) {
   errorHandle(err)
 }
-
 //添加一个请求拦截器
 axios.interceptors.request.use((config) => {
   if (sessionStorage.getItem("szyxToken")) {

src/api/index.js

@@ -19,8 +19,8 @@ function handle(data) {
       CommonUtil.debounce(() => {
         router.push("/login")
       }, 1000)
-    } else
-      throw Error(data.msg)
+    }
+    throw Error(data.msg)
   }
   return data.data
 }
@@ -30,5 +30,6 @@ API.setErrorHandle(errorHandle)
 
 export default {
   // 登录
-  login: (params) => API.POSTJSON("/tenant/v1/tenant/create", params)
+  register: (params) => API.POSTJSON("/tenant/v1/tenant/create", params),
+  login: (params) => API.POSTJSON("/user/v1/login", params)
 }

src/components/CommonView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import CommonHeader from "@/components/CommonHeader.vue";
+import CommonHeader from "@/components/CommonHeader.vue"
 
 defineProps<{
   title: string
@@ -10,10 +10,9 @@ defineProps<{
   <div class="common-layout">
     <el-container>
       <el-header style="align-content: center">
-        <CommonHeader :title="title"/>
+        <CommonHeader :title="title" />
       </el-header>
       <el-main><slot></slot></el-main>
     </el-container>
   </div>
 </template>
-

src/router/index.ts

@@ -1,7 +1,8 @@
 import { createRouter, createWebHashHistory } from "vue-router"
 import HomeView from "../views/HomeView.vue"
-import Login from "@/views/Login.vue"
+import LoginView from "@/views/LoginView.vue"
 import RegisterView from "@/views/RegisterView.vue"
+import MainView from "@/views/MainView.vue"
 
 const router = createRouter({
   history: createWebHashHistory(),
@@ -22,12 +23,17 @@ const router = createRouter({
     {
       path: "/login",
       name: "登录",
-      component: Login
+      component: LoginView
     },
     {
       path: "/register",
       name: "注册",
       component: RegisterView
+    },
+    {
+      path: "/main",
+      name: "主页",
+      component: MainView
     }
   ]
 })

src/stores/counter.ts

@@ -1,7 +1,7 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
+import { ref, computed } from "vue"
+import { defineStore } from "pinia"
 
-export const useCounterStore = defineStore('counter', () => {
+export const useCounterStore = defineStore("counter", () => {
   const count = ref(0)
   const doubleCount = computed(() => count.value * 2)
   function increment() {

src/stores/token.ts

@@ -0,0 +1,11 @@
+import { ref, computed } from "vue"
+import { defineStore } from "pinia"
+
+export const useTokenStore = defineStore("token", () => {
+  const token = ref(undefined)
+  function setToken(t: string) {
+    token.value = t
+  }
+
+  return { token, setToken }
+})

src/views/Login.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import CommonHeader from "@/components/CommonHeader.vue"
-</script>
-
-<template>
-  <el-container>
-    <el-header>
-      <CommonHeader title="登录" />
-    </el-header>
-    <el-main>Main</el-main>
-  </el-container>
-</template>
-
-<style scoped></style>

src/views/LoginView.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import CommonView from "@/components/CommonView.vue"
+import { ref } from "vue"
+import { Lock, User } from "@element-plus/icons-vue"
+import { useRouter } from "vue-router"
+import { ElMessage } from "element-plus"
+// @ts-ignore
+import API from "@/api/index.js"
+
+const router = useRouter()
+
+const Api = API
+
+const email = ref("")
+const pwd = ref("")
+
+const register = () => {
+  router.push("/register")
+}
+
+const login = () => {
+  if (email.value.length === 0) {
+    ElMessage.error("请输入正确的邮箱地址")
+    return
+  }
+  if (pwd.value.length === 0) {
+    ElMessage.error("请输入密码")
+    return
+  }
+  Api.login({
+    email: email.value,
+    password: pwd.value
+  }).then((res) => {
+    ElMessage.success("登录成功")
+    console.log(">>>>", JSON.stringify(res))
+    sessionStorage.setItem("szyxToken", res)
+    router.push("/main")
+  })
+}
+</script>
+
+<template>
+  <CommonView title="登录">
+    <div style="display: flex; place-content: center">
+      <el-card style="max-width: 480px">
+        <template #header>
+          <div class="card-header" style="display: flex; flex-direction: row-reverse">
+            <el-button type="primary" @click="register">注册</el-button>
+          </div>
+        </template>
+        <div class="flex gap-4 mb-4">
+          <el-input
+            class="text item"
+            v-model="email"
+            style="width: 440px"
+            placeholder="请输入邮箱地址"
+            :prefix-icon="User"
+            :clearable="true"
+          />
+          <el-input
+            v-model="pwd"
+            style="width: 440px; margin-top: 18px"
+            placeholder="请输入密码"
+            :prefix-icon="Lock"
+            :clearable="true"
+            :show-password="true"
+          />
+          <el-button style="width: 440px; margin-top: 28px" type="primary" @click="login"
+            >登录
+          </el-button>
+        </div>
+      </el-card>
+    </div>
+  </CommonView>
+</template>
+
+<style scoped></style>

src/views/MainView.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="common-layout">
+    <el-container>
+      <el-header>
+        <el-menu
+          :default-active="activeIndex"
+          menu-trigger="click"
+          class="el-menu-demo"
+          mode="horizontal"
+          :ellipsis="false"
+          :router="true"
+        >
+          <el-menu-item index="/">
+            <img style="width: 60px" src="@/assets/logo.svg" alt="logo" />
+          </el-menu-item>
+          <el-menu-item index="/about">控制台</el-menu-item>
+          <el-menu-item index="/login">注销</el-menu-item>
+        </el-menu>
+      </el-header>
+      <el-main>Main</el-main>
+    </el-container>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue"
+
+const activeIndex = ref("1")
+const handleSelect = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+</script>
+
+<style>
+.el-menu--horizontal > .el-menu-item:nth-child(1) {
+  margin-right: auto;
+}
+</style>

src/views/RegisterView.vue

@@ -50,10 +50,13 @@ const register = () => {
     ElMessage.error("验证码错误")
     return
   }
-  Api.login({
+  Api.register({
     userEmail: email.value,
     userPhone: phone.value,
     userPwd: pwd.value
+  }).then(() => {
+    ElMessage.success("注册成功")
+    open()
   })
 }
 </script>