refactor(login): 尝试合并登录几种方法

.env.development

@@ -12,6 +12,6 @@ VITE_APP_BASE_API = '/dev-api' # 小卤
 VITE_APP_PROMOTION = '/promotion-api' # 促销
 
 # 飞书服务回调地址（本地测试已经通过并上线，后台飞书登录接口重定向地址已经不是 localhost 了所以本地开发无需使用飞书登录，线上已经可用）
-VITE_APP_REDIRECT_URL = 'http://localhost:8080'
+VITE_APP_REDIRECT_URL = 'http://localhost:8085'
 # 积木报表服务地址
 VITE_APP_REPORT_URL = 'https://sfa-qa.wxl66.cn'
\ No newline at end of file

src/store/modules/user.js

@@ -26,8 +26,8 @@ export default defineStore(
           if (type === 'upass') {
             const { username, password } = data
             login({ username, password }).then(res => {
-              setToken(res.data.access_token)
               this.token = res.data.access_token
+              setToken(res.data.access_token)
               resolve()
             }).catch(error => {
               reject(error)
@@ -46,7 +46,7 @@ export default defineStore(
             qcLogin(data).then(res => {
               setToken(res.access_token)
               this.token = res.access_token
-              resolve() 
+              resolve()
             }).catch(error => {
               reject(error)
             })

src/views/login.vue

 <template>
   <div class="login"
-    v-if="isShowLogin">
+    v-if="!autoLoginLoading">
     <el-form ref="loginRef"
       :model="loginForm"
       :rules="loginRules"
@@ -35,12 +35,12 @@
       </el-form-item>
       <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
       <el-form-item>
-        <el-button :loading="loading"
+        <el-button :loading="accountPassLoading"
           size="large"
           type="primary"
           @click.prevent="handleLogin"
           class="login_btn">
-          <span v-if="!loading">登 录</span>
+          <span v-if="!accountPassLoading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
         <div class="auth_wrap">
@@ -64,114 +64,59 @@
   </div>
   <div class="auth_wait"
     v-else
-    v-loading="!isShowLogin"
+    v-loading="autoLoginLoading"
     element-loading-text="授权登录中...">
   </div>
 </template>
 
 <script setup>
-import { fsOAuthUrl, fsClientAuth } from "@/api";
-import Cookies from "js-cookie";
-import { encrypt, decrypt } from "@/utils";
+import { fsOAuthUrl, fsClientAuth } from "@/api"
+import Cookies from "js-cookie"
+import { encrypt, decrypt } from "@/utils"
 import useUserStore from '@/store/modules/user'
 
 const userStore = useUserStore()
-const route = useRoute();
-const router = useRouter();
-const { proxy } = getCurrentInstance();
+const route = useRoute()
+const router = useRouter()
+const { proxy } = getCurrentInstance()
 
 const loginForm = ref({
   username: "",
   password: "",
   rememberMe: false
-});
+})
 
 const loginRules = {
   username: [{ required: true, trigger: "blur", message: "请输入您的工号" }],
   password: [{ required: true, trigger: "blur", message: "请输入您的密码" }]
-};
+}
 
-const loading = ref(false);
-const isShowLogin = ref(false);
-const redirect = ref(undefined);
+const accountPassLoading = ref(false) // 账号密码登录状态
+const autoLoginLoading = ref(false) // 自动免登录
+const redirect = ref(undefined)
 
 watch(route, (newRoute) => {
-  redirect.value = newRoute.query?.redirect;
-}, { immediate: true });
+  redirect.value = newRoute.query?.redirect
+}, { immediate: true })
 
 // 回显账号密码
 function getCookie() {
-  const username = Cookies.get("username");
-  const password = Cookies.get("password");
-  const rememberMe = Cookies.get("rememberMe");
+  const username = Cookies.get("username")
+  const password = Cookies.get("password")
+  const rememberMe = Cookies.get("rememberMe")
   loginForm.value = {
     username: username === undefined ? loginForm.value.username : username,
     password: password === undefined ? loginForm.value.password : decrypt(password),
     rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
-  };
-}
-getCookie();
-
-// code 登录
-const loginByType = async (type, data) => {
-  // 登录
-  userStore.login({
-    type,
-    data
-  }).then(() => {
-    router.push({ path: redirect.value || "/" });
-  }).catch(() => {
-    loading.value = false;
-    isShowLogin.value = true;
-  });
-}
-
-// 飞书网页授权登录（授权后会回调我这个网页，执行代码获取 state，进行登录）
-const getOAuthState = () => {
-  const params = new URLSearchParams(window.location.search);
-  const code = params.get('code');
-  const state = params.get('state');
-  if (state === 'fs') {
-    loginByType('fs', { code })
-  }
-}
-getOAuthState()
-
-// 检查-是否飞书回跳，并客户端登录
-const checkFsLoginAuth = async () => {
-  if (window.h5sdk) {
-    const code = await fsClientAuth()
-    loginByType('fs', { code })
-  } else {
-    isShowLogin.value = true
   }
 }
-checkFsLoginAuth()
+getCookie()
 
-// 检查-是否勤策回跳，并客户端登录
-const checkQcLoginAuth = async () => {
-  isShowLogin.value = false
-  // 参数：?redirect=/m?state=STATE&code=CODE 这个格式
-  const url = window.location.href.split('?')[2]
-  if (url) {
-    const params = new URLSearchParams(url);
-    const state = params.get('state');
-    if (state === 'STATE') {
-      loginByType('qc', url)
-    } else {
-      isShowLogin.value = true
-    }
-  } else {
-    isShowLogin.value = true
-  }
-}
-checkQcLoginAuth()
-
-// 工号密码登录
+// 账号密码登录
 function handleLogin() {
   proxy.$refs.loginRef.validate(valid => {
     if (valid) {
-      loading.value = true;
+      accountPassLoading.value = true;
       // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
       if (loginForm.value.rememberMe) {
         Cookies.set("username", loginForm.value.username, { expires: 30 });
@@ -189,6 +134,47 @@ function handleLogin() {
   });
 }
 
+// 自动登录
+async function checkAutoLogin() {
+  // 飞书客户端内-免登录
+  if (window.h5sdk) {
+    autoLoginLoading.value = true
+    const code = await fsClientAuth()
+    loginByType('fs', { code })
+  } else {
+    // 飞书网页授权回调-免登录
+    const params = new URLSearchParams(window.location.search);
+    const code = params.get('code');
+    const state = params.get('state');
+    if (state === 'fs') {
+      loginByType('fs', { code })
+    }
+
+    // 勤策
+    // const url = window.location.href.split('?')[2]
+    // if (url) {
+    //   const params = new URLSearchParams(url);
+    //   const state = params.get('state');
+    //   state === 'STATE' && loginByType('qc', url)
+    // }
+  }
+}
+checkAutoLogin()
+
+// code 免账号密码登录
+const loginByType = async (type, data) => {
+  // 登录
+  userStore.login({
+    type,
+    data
+  }).then(() => {
+    router.push({ path: redirect.value || "/" });
+  }).catch(() => {
+    accountPassLoading.value = false;
+    autoLoginLoading.value = false;
+  })
+}
+
 // 网页回车登录
 window.addEventListener('keyup', (ev) => {
   if (ev.key === 'Enter') {