diff --git a/src/app/config.ts b/src/app/config.ts index 7e3f2611..d5885b93 100644 --- a/src/app/config.ts +++ b/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"; diff --git a/src/app/services/auth.ts b/src/app/services/auth.ts index ecc70ceb..c1792a7d 100644 --- a/src/app/services/auth.ts +++ b/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) => { diff --git a/src/common/component/Notification/useDeviceToken.ts b/src/common/component/Notification/useDeviceToken.ts index 97fe7a93..7ddef813 100644 --- a/src/common/component/Notification/useDeviceToken.ts +++ b/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(""); + 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; diff --git a/src/routes/index.tsx b/src/routes/index.tsx index cddd9968..32bb1953 100644 --- a/src/routes/index.tsx +++ b/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(() => {