完成登录请求

.eslintrc.cjs

@@ -17,7 +17,7 @@ module.exports = {
       {
         singleQuote: true, // 单引号
         semi: false, // 无分号
-        printWidth: 80, // 每行宽度至多80字符
+        printWidth: 100, // 每行宽度至多100字符
         trailingComma: 'none', // 不加对象|数组最后逗号
         endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
       }

.prettierrc.json

@@ -5,4 +5,4 @@
   "singleQuote": true,
   "printWidth": 100,
   "trailingComma": "none"
-}
+}

src/api/user.js

@@ -1,8 +1,8 @@
 import request from '@/utils/request'
-import { CLIENT_TYPE, CLIENT_NAME, CLIENT_VERSION } from '@/const/userConst'
+import { CLIENT_TYPE, CLIENT_NAME, CLIENT_VERSION, CLIENT_ID } from '@/const/userConst'
 
 export const userRegisterService = ({ username, password }) => {
-  request.post('/user/register', {
+  return request.post('/user/register', {
     account: username,
     nickName: '',
     password: password,
@@ -11,3 +11,14 @@ export const userRegisterService = ({ username, password }) => {
     clientVersion: CLIENT_VERSION
   })
 }
+
+export const userLoginService = ({ username, password }) => {
+  return request.post('/user/login', {
+    account: username,
+    password: password,
+    clientId: CLIENT_ID,
+    clientType: CLIENT_TYPE,
+    clientName: CLIENT_NAME,
+    clientVersion: CLIENT_VERSION
+  })
+}

src/const/userConst.js

@@ -1,3 +1,4 @@
 export const CLIENT_TYPE = 2
 export const CLIENT_NAME = 'web'
 export const CLIENT_VERSION = '0.0.1'
+export const CLIENT_ID = 'XXAA'

src/stores/user.js

@@ -1,18 +1,58 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
-// 用户模块 token setToken......
+// 用户模块
 export const userStore = defineStore(
   'anyim-user',
   () => {
-    const token = ref('')
-    const setToken = (newToken) => {
-      token.value = newToken
+    const at = ref({
+      token: '',
+      secret: '',
+      expiretime: null
+    })
+    const rt = ref({
+      token: '',
+      secret: '',
+      expiretime: null
+    })
+    const setAt = (newAt) => {
+      const now = new Date()
+      at.value = {
+        token: newAt.token,
+        secret: newAt.secret,
+        expiretime: new Date(now.getTime() + newAt.expire * 1000)
+      }
+    }
+    const setRt = (newRt) => {
+      const now = new Date()
+      rt.value = {
+        token: newRt.token,
+        secret: newRt.secret,
+        expiretime: new Date(now.getTime() + newRt.expire * 1000)
+      }
+    }
+    const clearAt = () => {
+      at.value = {
+        token: '',
+        secret: '',
+        expiretime: null
+      }
+    }
+    const clearRt = () => {
+      rt.value = {
+        token: '',
+        secret: '',
+        expiretime: null
+      }
     }
 
     return {
-      token,
-      setToken
+      at,
+      rt,
+      setAt,
+      setRt,
+      clearAt,
+      clearRt
     }
   },
   {

src/utils/request.js

@@ -29,7 +29,7 @@ instance.interceptors.response.use(
       return res
     }
 
-    ElMessage.error(res.data.msg || '服务异常')
+    ElMessage.error(res.data.desc || '服务异常')
     return Promise.reject(res.data)
   },
   (err) => {

src/views/LoginPage.vue

@@ -1,8 +1,11 @@
 <script setup>
 import { User, Lock } from '@element-plus/icons-vue'
-import { ref } from 'vue'
-import { userRegisterService } from '@/api/user.js'
-const isRegister = ref(true)
+import { ref, watch } from 'vue'
+import router from '@/router'
+import { userRegisterService, userLoginService } from '@/api/user.js'
+import { userStore } from '@/stores'
+const isRegister = ref(false)
+
 // 提交的整个form表单的数据
 const formModel = ref({
   username: '',
@@ -16,7 +19,11 @@ const form = ref()
 const rules = {
   username: [
     { required: true, message: '请输入用户名', trigger: 'blur' },
-    { min: 5, max: 10, message: '用户名必须是5-10位的字符', trigger: 'blur' }
+    {
+      pattern: /^[a-zA-Z0-9_]{6,32}$/,
+      message: '用户名必须是6-32位的字母、数字或下划线',
+      trigger: 'blur'
+    }
   ],
   password: [
     { required: true, message: '请输入密码', trigger: 'blur' },
@@ -46,13 +53,32 @@ const rules = {
   ]
 }
 
+const userData = userStore()
+
 const register = async () => {
   await form.value.validate() // 注册之前预校验
-  console.log('开始注册请求')
   await userRegisterService(formModel.value)
   ElMessage.success('注册成功')
   isRegister.value = false
 }
+
+const login = async () => {
+  await form.value.validate() // 登录之前预校验
+  const res = await userLoginService(formModel.value)
+  ElMessage.success('登录成功')
+  console.log(res)
+  userData.setAt(res.data.data.accessToken)
+  userData.setRt(res.data.data.refreshToken)
+  router.push('/')
+}
+
+watch(isRegister, () => {
+  formModel.value = {
+    username: '',
+    password: '',
+    repassword: ''
+  }
+})
 </script>
 
 <template>
@@ -94,30 +120,28 @@ const register = async () => {
           ></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button
-            @click="register"
-            class="button"
-            type="primary"
-            auto-insert-space
-          >
+          <el-button @click="register" class="button" type="primary" auto-insert-space>
             注册
           </el-button>
         </el-form-item>
         <el-form-item class="flex">
-          <el-link type="info" :underline="false" @click="isRegister = false">
-            ← 返回
-          </el-link>
+          <el-link type="info" :underline="false" @click="isRegister = false"> ← 登录 </el-link>
         </el-form-item>
       </el-form>
-      <el-form ref="form" size="large" autocomplete="off" v-else>
+      <el-form :model="formModel" :rules="rules" ref="form" size="large" autocomplete="off" v-else>
         <el-form-item>
           <h1>登录</h1>
         </el-form-item>
-        <el-form-item>
-          <el-input :prefix-icon="User" placeholder="请输入用户名"></el-input>
-        </el-form-item>
-        <el-form-item>
+        <el-form-item prop="username">
           <el-input
+            v-model="formModel.username"
+            :prefix-icon="User"
+            placeholder="请输入用户名"
+          ></el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input
+            v-model="formModel.password"
             name="password"
             :prefix-icon="Lock"
             type="password"
@@ -131,14 +155,10 @@ const register = async () => {
           </div>
         </el-form-item>
         <el-form-item>
-          <el-button class="button" type="primary" auto-insert-space
-            >登录</el-button
-          >
+          <el-button @click="login" class="button" type="primary" auto-insert-space>登录</el-button>
         </el-form-item>
         <el-form-item class="flex">
-          <el-link type="info" :underline="false" @click="isRegister = true">
-            注册 →
-          </el-link>
+          <el-link type="info" :underline="false" @click="isRegister = true"> 注册 → </el-link>
         </el-form-item>
       </el-form>
     </el-col>