Next.js跨页面传参初始化组件 accessToken存储读取方案咨询

存储方案选型 #

根据安全需求二选一即可，两种方案都能满足持久化要求：

• localStorage：适合accessToken仅用于初始化第三方WebSdk、无高敏感权限的场景，前端可直接读写，实现成本最低，数据持久化到浏览器本地，除非用户手动清理缓存否则不会丢失，完全匹配「离开B页面再返回无需重复提交」的需求。
• HttpOnly Cookie：适合accessToken携带高敏感操作权限的场景，由后端写入Response头，JS无法直接读取，能规避XSS窃取token的风险，安全性更高；缺点是前端初始化Sdk时需要额外调一次后端接口获取token值，不能直接从存储里读。

不要把token只存在Redux、Context这类内存状态中，页面刷新后内存数据会清空，无法实现持久化效果。

Hook 使用说明 #

useState和useEffect都需要用到，各自承担明确的职责：

• useState：在B页面维护响应式的token值，WebSdk组件通过props接收token，只有state变更才会触发组件更新，保证新token申请后能同步到Sdk实例，满足「token更新后B页面同步生效」的要求。
• useEffect：负责处理两类副作用逻辑：一是B页面首次加载时，从持久化存储中读取已保存的token初始化state；二是监听存储变化、同步最新token值到state，同时在token更新时把新值写入持久化存储。

具体实现步骤 #

A页面提交逻辑 #

1. 用户输入数据点击提交后，调用后端接口拿到返回的accessToken
2. 若选用localStorage存储，直接调用localStorage.setItem('sdk_access_token', 返回的token值)写入本地；若选用HttpOnly Cookie，后端会自动在响应中写入Cookie，前端无需额外操作
3. 调用Next.js路由方法跳转到B页面，App Router用router.push('/b-page')，Pages Router用法一致。

B页面初始化逻辑 #

1. 组件顶部定义token状态，初始值设为null：

   const [accessToken, setAccessToken] = useState<string | null>(null)
   const router = useRouter()
   

2. 写第一个仅在组件首次挂载时执行的useEffect（依赖数组为空），读取本地存储的token：

   useEffect(() => {
     // 用localStorage的场景直接读
     const savedToken = localStorage.getItem('sdk_access_token')
     // 用HttpOnly Cookie的场景这里换成调用后端接口拿token
     if (!savedToken) {
       // 没有有效token直接跳回A页面
       router.replace('/a-page')
       return
     }
     setAccessToken(savedToken)
   }, [router])
   

3. 写第二个监听token和存储变化的useEffect，保证新token能实时同步：

   useEffect(() => {
     // 监听storage事件，自动感知其他页面（比如重新走A页面提交流程）写入的新token
     const syncTokenFromStorage = () => {
       const latestToken = localStorage.getItem('sdk_access_token')
       if (latestToken && latestToken !== accessToken) {
         setAccessToken(latestToken)
       }
     }
     window.addEventListener('storage', syncTokenFromStorage)
     return () => window.removeEventListener('storage', syncTokenFromStorage)
   }, [accessToken])
   

4. token加载完成前渲染加载态，拿到token后再初始化WebSdk，避免传空值导致Sdk初始化失败：

   if (!accessToken) return <div>服务加载中...</div>
   
   return (
     <WebSdk
       accessToken={accessToken}
       expirationHandler={async () => {
         // token过期逻辑：重新调用接口拿新token，更新localStorage和state即可
         const newToken = await fetchNewToken()
         localStorage.setItem('sdk_access_token', newToken)
         setAccessToken(newToken)
         return newToken
       }}
       config={config}
       options={options}
       onMessage={messageHandler}
       onError={errorHandler}
     />
   )
   

补充说明 #

• 若用户主动退出、token明确失效时，记得调用localStorage.removeItem('sdk_access_token')清理旧值，避免用失效token初始化Sdk报错。
• 如果是同标签页内A页面跳B页面的场景，也可以在跳转时通过路由query临时传token，但必须同步写入持久化存储，否则刷新页面后query参数丢失会导致token失效。

内容的提问来源于stack exchange，提问作者sev