Fix login logic (#4)

Author: wsxiaolin

src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <router-view v-slot="{ Component }">
       <!-- keep alive源自于vue-router的缓存 -->
-       <!-- keep alive comes from cach function from vue-router -->
+      <!-- keep alive comes from cach function from vue-router -->
       <keep-alive>
         <component
           :is="Component"

src/components/friends/list.vue

@@ -2,7 +2,7 @@
   <infiniteScroll
     :initial-items="items"
     :has-more="!noMore"
-    :margin-top="-200" 
+    :margin-top="-200"
     @load="handleLoad"
   >
     <template #default="{ items }">

src/components/messages/MessageList.vue

@@ -19,14 +19,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, nextTick, onMounted } from "vue";
+import { ref, watch, nextTick } from "vue";
 import MessageItem from "./MessageItem.vue";
 import { getData } from "@services/api/getData.ts";
 import type { PropType } from "vue";
 import { showMessage } from "@popup/naiveui";
 import InfiniteScroll from "../utils/infiniteScroll.vue";
 import { useI18n } from "vue-i18n";
-import storageManager from "@storage/index.ts";
 import { checkLogin } from "@services/utils.ts";
 import { NDivider } from "naive-ui";
 
@@ -97,7 +96,8 @@ function handleMsgClick(message: PMessageItem) {
 
 const handleLoad = async () => {
   if (
-    storageManager.getObj("userInfo")?.value?.loginStatus === false &&
+    // CheckLogin without popup for the sake of avoiding API Handling errors
+    checkLogin(false) === false &&
     Category === "User"
   ) {
     return;
@@ -137,7 +137,10 @@ const handleLoad = async () => {
   await nextTick();
 };
 
+if (Category === "User") checkLogin();
+// CheckLogin with popup for the sake of leading user
 handleLoad();
+
 watch(
   () => upDate,
   () => {
@@ -153,10 +156,6 @@ window.$Logger.logPageView({
   pageLink: `/${Category}/${ID}/Comments/`,
   timeStamp: Date.now(),
 });
-
-onMounted(() => {
-  if (Category === "User") checkLogin();
-});
 </script>
 
 <style scoped>

src/components/utils/Header.vue

@@ -3,6 +3,18 @@
     <slot></slot>
     <!-- @see https://icomoon.io/app/ -->
     <div class="buttons">
+      <div class="logout" @click="logout">
+        <svg
+          width="25"
+          height="25"
+          viewBox="0 0 32 32"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M24 20v-4h-10v-4h10v-4l6 6zM22 18v8h-10v6l-12-6v-26h22v10h-2v-8h-16l8 4v18h8v-6z"
+          ></path>
+        </svg>
+      </div>
       <div v-show="!isFullScreen" class="fullScreen" @click="toggleFullScreen">
         <svg
           width="22"
@@ -34,10 +46,11 @@
 </template>
 
 <script setup lang="ts">
+import router from "../../router/index";
 import { ref } from "vue";
 let isFullScreen = ref(false);
 
-const toggleFullScreen = () => {
+function toggleFullScreen() {
   if (!document.fullscreenElement) {
     document.documentElement.requestFullscreen();
     isFullScreen.value = true;
@@ -47,19 +60,20 @@ const toggleFullScreen = () => {
       isFullScreen.value = false;
     }
   }
-};
+}
 
 /**
  *  强制刷新，但是日后需要修改本地存储清理逻辑
  * Force refresh, but the local storage clearing logic needs to be modified in the future
  *  @deprecated
  */
-// function logout() {
-//   sm.remove("userInfo");
-//   Emitter.emit("info", "您已退出登录！", 1);
-//   window.location.href = getPath("/@root");
-//   window.location.reload();
-// }
+function logout() {
+  localStorage.clear();
+  // This is not merely to clear the storage, mabye an error happened in our storage system so the user try to logout
+  router.push({ name: "Home" }).then(() => {
+    window.location.reload();
+  });
+}
 </script>
 
 <style scoped>
@@ -80,7 +94,7 @@ const toggleFullScreen = () => {
   display: flex;
   align-items: center;
   cursor: pointer;
-  padding-right: 8vw;
+  padding-right: 20px;
   gap: 10px;
 }
 

src/config/user.config.ts

@@ -1,7 +1,6 @@
 import i18n from "@i18n/index";
-import Emitter from "../services/eventEmitter";
 import storageManager from "../services/storage";
-import { showDialog } from "@popup/naiveui";
+import { showDialog, showNotification } from "@popup/naiveui";
 
 export const settingsConfig = [
   {
@@ -30,7 +29,10 @@ export const settingsConfig = [
                 label: "newValue",
                 timestamp: Date.now(),
               });
-              Emitter.emit("loginRequired");
+              showNotification({
+                type: "info",
+                title: i18n.global.t("login.reLoginContent"),
+              });
             },
           });
         },

src/services/api/getData.ts

@@ -1,4 +1,3 @@
-import Emitter from "../eventEmitter.ts";
 import { beforeRequest, afterRequest } from "./Interceptor.ts";
 import sm from "@storage/index.ts";
 import i18n from "@i18n/index.ts";
@@ -22,12 +21,11 @@ import { getPath } from "../utils.ts";
 // eslint-disable-next-line max-lines-per-function
 export async function getData(path: string, body: unknown) {
   const userInfo = sm.getObj("userAuthInfo");
-  if (userInfo.status === "empty" || userInfo.status === "expired") {
-    Emitter.emit("loginRequired");
-    return;
-  }
-  const token = userInfo.value.token;
-  const authCode = userInfo.value.authCode;
+  const token = userInfo.value?.token;
+  const authCode = userInfo.value?.authCode;
+  // If token || authcode is null, it means a there's a problem with our code logic
+  // Mabe the anonymous token storage or local storage or authentication (CheckLogin) has a problem
+  // 可能是匿名Token的存储或者本地存储或者鉴权(CheckLogin)出了问题
   const beforeRes = beforeRequest(path);
   if (beforeRes.continue === false) {
     return beforeRes.data;
@@ -79,13 +77,8 @@ export async function getData(path: string, body: unknown) {
 /**
  * 在首页进行登录操作。 Login operation on the Home.vue
  * 注意，不进行本操作无法访问其他任何API接口（除非有本地缓存），所以在处理任何其他API时都要处理是否登录的错误（不等同于没有“类似管理行为”的权限）
- * 可以使用EventEmitter来发布LoginRequired事件
- * 订阅laoding、error、success事件，并管理用户登录状态存储。使用`window.$message`显示消息。
- *
  * Note that without performing this operation, you cannot access any other API interfaces (unless there is local cache).
  * Therefore, when handling any other API, you should handle the error of whether the user is
- * Emits loading, error, and success events via `Emitter` and manages user login status in storage. Displays messages using `window.$message`.
- *
  * @param arg1 - 用户名或者API令牌，取决于IsToken。’The username or API token, depending on `is_token`.
  * @param arg2 - 密码或者API认证码，取决于IsToken。The password or API auth code, depending on `is_token`.
  * @returns 成功时返回服务器响应数据，失败时发出错误事件。A promise that resolves to the server response data if successful, or emits an error event on failure.
@@ -140,7 +133,8 @@ export async function login(
       });
     }
     return response.json().then((data) => {
-      if (data.Token != null && data.AuthCode != null)
+      // Exclude(排除) user who has authenticated successfully but still does an null-null login to get homepage data
+      if (sm.getObj("userAuthInfo").value?.token == null) {
         sm.setObj(
           "userAuthInfo",
           {
@@ -149,6 +143,7 @@ export async function login(
           },
           30 * 24 * 60 * 60 * 1000,
         );
+      }
       messageRef.destroy();
       return data;
     });

src/services/api/logWriter.ts

@@ -1,7 +1,6 @@
 // see repository CIVITAS-John/Quantum-Intermediates ( ask @CIVITAS-John for access )
 // Up till now, nobody kowns whether it works, as the log-uploading API well repond with 200 nomatter what.
 
-
 export type LogSession = {
   type: 0;
   region: string;

src/services/popup/loginModel.ts

@@ -9,8 +9,8 @@ export default async function showLoginModel() {
     inset: "0",
     width: "100%",
     height: "100%",
-    zIndex: "8000", 
-    // make sure it's on top. 
+    zIndex: "8000",
+    // make sure it's on top.
     // I donnot know why it need to be as big as 8000, but it works.
     pointerEvents: "auto",
     background: "transparent",

src/services/storage/readme.md

@@ -4,7 +4,10 @@ Storage manager(alias: sm?) uses localStorage to store small data, and indexDB t
 
 In the future, for example, when opening messages board, we need to wait for fetching  data before rendering. Instead, query in the local database and render it immediately, then compare with server response amd update.Offline pages may also be served through this middleware layer.
 
+Tips: when user logput, we'll use `localStorage.clear()` derectly
 
 storageManager（被奇怪的缩写为sm）使用localStorage存小数据，（计划）indexDB缓存API，日后可能依据用户配置启用settionstoragre。
 
 未来 比如打开留言板，不毕等待及时数据，先从本地存储的数据库里面查询后渲染，再校验并由Vue自动最小化更新渲染（因为这些数据一般是不会变的！）这还可以支持离线页面。
+
+注意：用户登出时会直接使用`localStorage.clear()`清除数据

src/services/utils.ts

@@ -6,9 +6,9 @@ import {
   differenceInHours,
 } from "date-fns";
 import i18n from "@i18n/index";
-import Emitter from "./eventEmitter";
 import storageManager from "./storage";
 import { showDialog } from "@popup/naiveui";
+import router from "../router/index";
 
 type PUser = {
   ID: string;
@@ -56,7 +56,7 @@ export function getUserUrl(user: PUser): string {
       ? "/@base/assets/user/default-avatar.png"
       : `/@static/users/avatars/${user.ID.slice(0, 4)}/${user.ID.slice(4, 6)}/${user.ID.slice(
           6,
-          8
+          8,
         )}/${user.ID.slice(8, 24)}/${user.Avatar}.jpg`;
 
   return getPath(url);
@@ -65,7 +65,7 @@ export function getUserUrl(user: PUser): string {
 export function getCoverUrl(data: PProjects): string {
   const url = `/@static/experiments/images/${data.ID.slice(0, 4)}/${data.ID.slice(
     4,
-    6
+    6,
   )}/${data.ID.slice(6, 8)}/${data.ID.slice(8, 24)}/${data.Image || 0}.jpg`;
   return getPath(url);
 }
@@ -143,7 +143,7 @@ export function decodeHrefToQueryObj(base64Input: string) {
   }
   const latin1String = atob(base64Input.replace(/DEVIDER/g, "/"));
   const utf8Bytes = new Uint8Array(
-    [...latin1String].map((char) => char.charCodeAt(0))
+    [...latin1String].map((char) => char.charCodeAt(0)),
   );
   const jsonString = new TextDecoder().decode(utf8Bytes);
   const result = JSON.parse(jsonString);
@@ -170,7 +170,7 @@ export function decodeHrefToQueryObj(base64Input: string) {
 export function formatDate(
   id: string,
   showRelative?: boolean,
-  type?: string
+  type?: string,
 ): string {
   // 1. 提取并转换16进制时间戳
   // 1. Extract and convert 16-bit timestamp
@@ -205,7 +205,7 @@ export function formatDate(
     else if (diffDays === 1) {
       return `${i18n.global.t("date.yesterday") as string} ${i18n.global.d(
         date,
-        "time"
+        "time",
       )}`;
     }
     // 前天
@@ -261,7 +261,7 @@ export function removeToken(obj: any) {
 /**
  * Can user have access to login-restricted features
  * @param showLoginLeader Pupup a dialog to lead user to login
- * @returns 
+ * @returns
  */
 export function checkLogin(showLoginLeader = true): boolean {
   if (storageManager.getObj("userInfo").value?.Nickname == null) {
@@ -271,7 +271,7 @@ export function checkLogin(showLoginLeader = true): boolean {
         content: i18n.global.t("login.loginContent"),
         positiveText: i18n.global.t("login.confirm"),
         onPositiveClick: async () => {
-          Emitter.emit("loginRequired");
+          router.push({ name: "Home" });
         },
       });
     return false;