React中createContext存储的管理员状态刷新页面后重置如何解决

问题根因 #

你的问题来自两个疏漏：

• 登录时调用login方法存储用户数据到localStorage时，仅存了token，没有把isAdmin管理员标识同步存入本地，刷新页面后无法读取到之前的管理员状态
• 页面初始化的useEffect逻辑中，调用login恢复登录状态时，传入的是当前state中初始值为false的admin，没有从本地存储读取真实的管理员状态

修复方案 #

直接替换auth.hook.js的代码即可：

import { useState, useCallback, useEffect } from 'react'

const storageName = 'userData'

export const useAuth = () => {
  const [token, setToken] = useState(null)
  const [admin, setAdmin] = useState(false)
  const login = useCallback((jwtToken, isAdmin) => {
    setToken(jwtToken)
    setAdmin(isAdmin)
    // 存储时新增admin字段
    localStorage.setItem(storageName, JSON.stringify({
      token: jwtToken,
      admin: isAdmin
    }))
  }, [])

  const logout = useCallback(() => {
    setToken(null)
    setAdmin(false)
    localStorage.removeItem(storageName)
  }, [])

  useEffect(() => {
    const data = JSON.parse(localStorage.getItem(storageName))
    // 从本地存储读取admin字段传入login
    if (data && data.token) {
      login(data.token, data.admin || false)
    }
  }, [login])

  return { login, logout, token, admin }
} 

安全提示 #

前端存储的管理员标识仅做前端交互逻辑的判断依据，所有管理员权限对应的后端接口，必须单独做token权限校验，避免用户手动篡改本地存储内容伪造管理员身份。

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