feat: local device token

src/app/config.ts

@@ -110,6 +110,7 @@ export const KEY_EXPIRE = "VOCECHAT_TOKEN_EXPIRE";
 export const KEY_REFRESH_TOKEN = "VOCECHAT_REFRESH_TOKEN";
 export const KEY_UID = "VOCECHAT_CURR_UID";
 export const KEY_DEVICE_ID = "VOCECHAT_DEVICE_KEY";
+export const KEY_DEVICE_TOKEN = "VOCECHAT_DEVICE_TOKEN";
 export const KEY_USERS_VERSION = "VOCECHAT_USERS_VERSION";
 export const KEY_AFTER_MID = "VOCECHAT_AFTER_MID";
 export const KEY_PWA_INSTALLED = "VOCECHAT_PWA_INSTALLED";

src/app/services/auth.ts

@@ -2,7 +2,7 @@ import { createApi } from "@reduxjs/toolkit/query/react";
 import { nanoid } from "@reduxjs/toolkit";
 import baseQuery from "./base.query";
 import { setAuthData, updateToken, resetAuthData, updateInitialized } from "../slices/auth.data";
-import BASE_URL, { KEY_DEVICE_ID, KEY_LOCAL_MAGIC_TOKEN } from "../config";
+import BASE_URL, { KEY_DEVICE_ID, KEY_DEVICE_TOKEN, KEY_LOCAL_MAGIC_TOKEN } from "../config";
 import {
   AuthData,
   CredentialResponse,
@@ -13,11 +13,12 @@ import {
 
 const getDeviceId = () => {
   let d = localStorage.getItem(KEY_DEVICE_ID);
+  let dt = localStorage.getItem(KEY_DEVICE_TOKEN) || "";
   if (!d) {
     d = `web:${nanoid()}`;
     localStorage.setItem(KEY_DEVICE_ID, d);
   }
-  return d;
+  return { device: d, device_token: dt };
 };
 
 export const authApi = createApi({
@@ -30,8 +31,8 @@ export const authApi = createApi({
         method: "POST",
         body: {
           credential,
-          device: getDeviceId(),
-          device_token: "test"
+          device: getDeviceId().device,
+          device_token: getDeviceId().device_token
         }
       }),
       transformResponse: (data: AuthData) => {

src/common/component/Notification/useDeviceToken.ts

@@ -1,11 +1,17 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { initializeApp } from "firebase/app";
 import { getToken, getMessaging } from "firebase/messaging";
-import { firebaseConfig } from "../../../app/config";
+import { firebaseConfig, KEY_DEVICE_TOKEN } from "../../../app/config";
 let requesting = false;
 let error = false;
 const useDeviceToken = (vapidKey: string) => {
   const [token, setToken] = useState<string>("");
+  useEffect(() => {
+    if (token) {
+      localStorage.setItem(KEY_DEVICE_TOKEN, token);
+    }
+  }, [token]);
+
   // https only
   if (navigator.serviceWorker) {
     const messaging = getMessaging(initializeApp(firebaseConfig));
@@ -31,7 +37,7 @@ const useDeviceToken = (vapidKey: string) => {
         console.error("An error occurred while retrieving token. ", err);
       });
   }
-  return token as string;
+  return token;
 };
 
 export default useDeviceToken;

src/routes/index.tsx

@@ -32,6 +32,8 @@ import Meta from "../common/component/Meta";
 // import ChatPage from "./chat";
 import LazyIt from './lazy';
 import store, { useAppSelector } from "../app/store";
+import useDeviceToken from "../common/component/Notification/useDeviceToken";
+import { vapidKey } from "../app/config";
 let toastId: string;
 const PageRoutes = () => {
   const {
@@ -40,6 +42,8 @@ const PageRoutes = () => {
   } = useAppSelector((store) => {
     return { ui: store.ui, fileMessages: store.fileMessage };
   }, isEqual);
+  // 提前获取device token
+  useDeviceToken(vapidKey);
 
   // 掉线检测
   useEffect(() => {