Merge pull request #125 from web-tech-tw/zebra

Implement Zebra Code

.env

@@ -1,8 +1,10 @@
 VUE_APP_SELF_HOST=https://web-tech.tw/openchat
 VUE_APP_OCJI_HOST=https://web-tech.tw/recv/openchat
 
-VUE_APP_TURNSTILE_SITE_KEY="0x4AAAAAAAr6LY1hBUbTBkVA"
-
 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"
+
+VUE_APP_ZEBRA_TOKEN_NAME="zebra"

package.json

@@ -12,6 +12,7 @@
     "autoprefixer": "^10",
     "core-js": "^3.8.3",
     "dayjs": "^1.11.12",
+    "nanoid": "^5.0.7",
     "postcss": "^8",
     "tailwindcss": "^3",
     "ua-parser-js": "^1.0.38",

src/plugins/axios.js

@@ -3,9 +3,14 @@
 import Vue from "vue";
 import axios from "axios";
 
+import {
+    nanoid,
+} from "nanoid";
+
 const {
     VUE_APP_OCJI_HOST: ocjiRecvHost,
     VUE_APP_SARA_TOKEN_NAME: saraTokenName,
+    VUE_APP_ZEBRA_TOKEN_NAME: zebraTokenName,
 } = process.env;
 
 // Full config:  https://github.com/axios/axios#request-config
@@ -22,12 +27,19 @@ const axiosClient = axios.create(config);
 axiosClient.interceptors.request.use(
     // Do something before request is sent
     (config) => {
+        let zebraToken = localStorage.getItem(zebraTokenName);
+        if (!zebraToken) {
+            zebraToken = nanoid();
+            localStorage.setItem(zebraTokenName, zebraToken);
+        }
+        config.headers["X-Zebra-Code"] = zebraToken;
+
         const saraToken = localStorage.getItem(saraTokenName);
         if (!saraToken) {
             return config
         }
-
         config.headers["Authorization"] = `SARA ${saraToken}`;
+
         return config;
     },
     // Do something with request error