Merge pull request #126 from web-tech-tw/jwt-decode

perf: replace sara with jwt decoder

Author: supersonictw

.env

@@ -2,7 +2,6 @@ VUE_APP_SELF_HOST=https://web-tech.tw/openchat
 VUE_APP_OCJI_HOST=https://web-tech.tw/recv/openchat
 
 VUE_APP_SARA_INTE_HOST=https://web-tech.tw/sara
-VUE_APP_SARA_RECV_HOST=https://web-tech.tw/recv/sara
 VUE_APP_SARA_TOKEN_NAME=unified_token
 
 VUE_APP_TURNSTILE_SITE_KEY="0x4AAAAAAAr6LY1hBUbTBkVA"

package-lock.json

@@ -12,6 +12,7 @@
     "autoprefixer": "^10",
     "core-js": "^3.8.3",
     "dayjs": "^1.11.12",
+    "jwt-decode": "^4.0.0",
     "nanoid": "^5.0.7",
     "postcss": "^8",
     "tailwindcss": "^3",

package.json

@@ -237,7 +237,7 @@ export default {
   },
   async created() {
     document.addEventListener('click', this.handleDocumentClick);
-    this.profile = await this.$profile();
+    this.profile = this.$profile();
   },
   methods: {
     openMenu(item) {

src/components/AppHeader.vue

@@ -1,6 +1,6 @@
 import Vue from 'vue'
-import './plugins/sara'
 import './plugins/axios'
+import './plugins/profile'
 import App from './App.vue'
 import router from './router'
 import './assets/tailwind.css'

src/main.js

@@ -0,0 +1,41 @@
+"use strict";
+
+import Vue from "vue";
+import { jwtDecode } from "jwt-decode";
+
+const {
+    VUE_APP_SARA_TOKEN_NAME: saraTokenName,
+} = process.env;
+
+export const useProfile = () => {
+    const saraToken = localStorage.getItem(saraTokenName);
+    if (!saraToken) {
+        return null;
+    }
+
+    try {
+        const data = jwtDecode(saraToken);
+        if (Date.now() >= data.exp * 1000) {
+            throw new Error("sara token expired");
+        }
+        return data?.user;
+    } catch (e) {
+        console.warn(e);
+        localStorage.removeItem(saraTokenName);
+        location.reload();
+        return null;
+    }
+};
+
+const extension = {
+    install: (Vue) => {
+        window.profile = useProfile;
+        Vue.profile = useProfile;
+        Vue.prototype.profile = useProfile;
+        Vue.prototype.$profile = useProfile;
+    },
+};
+
+Vue.use(extension);
+
+export default extension;

src/plugins/profile.js

@@ -176,7 +176,7 @@ export default {
     },
   },
   async created() {
-    this.profile = await this.$profile();
+    this.profile = this.$profile();
     if (!this.profile) {
       const refer = `${process.env.VUE_APP_SELF_HOST}/#/admin/join`;
       const url = `${process.env.VUE_APP_SARA_INTE_HOST}/?refer=${encodeURIComponent(refer)}`;

src/plugins/sara.js

@@ -62,7 +62,7 @@ export default {
     },
   },
   async created() {
-    this.profile = await this.$profile();
+    this.profile = this.$profile();
     if (!this.profile) {
       const refer = `${process.env.VUE_APP_SELF_HOST}/#/admin/room`;
       const url = `${process.env.VUE_APP_SARA_INTE_HOST}/?refer=${encodeURIComponent(refer)}`;