Django Knox Token配合React如何实现持久登录，能否结合Session认证？

问题根因 #

你遇到的登录状态刷新丢失问题核心原因是：获得到的Knox Token仅存储在React运行时的内存状态中，页面刷新后JS内存重置，状态自然丢失，和后端当前配置没有直接关联。

方案1：纯Knox Token认证（无需结合Session，改动最小） #

不需要修改后端代码，仅调整前端逻辑即可：

• 登录成功后将Token持久化存储到本地，优先选localStorage（持久化，关闭浏览器仍保留）或sessionStorage（仅当前标签页有效），修改Login方法的回调逻辑：

// 原data回调里修改
data => {
  console.log(data.token)
  localStorage.setItem('knox_auth_token', data.token) // 新增存储逻辑
  props.userLogin(data.token)
}

• React应用初始化时（比如根组件App.js的useEffect钩子中），检查本地存储的Token是否存在，存在则直接设置为登录状态：

useEffect(() => {
  const token = localStorage.getItem('knox_auth_token')
  if (token) {
    // 调用你的登录状态设置逻辑，将token存入全局状态
    userLogin(token)
    LoggedIn(true)
  }
}, [])

• 后续向后端发业务请求时，在请求头中携带Token即可通过认证：

fetch('你的业务接口地址', {
  headers: {
    'Authorization': `Token ${localStorage.getItem('knox_auth_token')}`
  }
})

• 登出时调用Knox的登出接口，同时删除本地存储的Token：

localStorage.removeItem('knox_auth_token')

方案2：结合Django Session认证（你问的实现方式，安全性更高） #

该方案完全可行，Session默认用HttpOnly Cookie存储，可规避XSS盗取Token的风险：

后端配置调整 #

在Django的settings.py中，DRF配置项同时添加两种认证类：

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'knox.auth.TokenAuthentication',
        'rest_framework.authentication.SessionAuthentication',
    ],
    # 其他配置保持不变
}

前端配置调整 #

所有fetch请求都添加credentials: 'include'配置，让浏览器自动携带Session Cookie：

// 登录请求示例
fetch("http://127.0.0.1:8000/users/accounts/api/auth/login",{
  method: "POST", 
  headers: {'Content-Type': 'application/json'},
  credentials: 'include', // 新增配置
  body: JSON.stringify(state.credentials)
})

你后端已经调用了login(request, user)，所以登录成功后Session已经生成，后续请求不需要额外携带Token，只要带Cookie就能通过认证，刷新页面后Session不会丢失，登录状态自然保留。

现有代码bug修复 #

你当前Login方法的回调逻辑存在异步错误：setHasLoggedIn是异步更新状态，调用后立刻读取hasLoggedIn拿到的仍是更新前的false值，建议修改为：

// 原then块修改
.then(
  data => {
    console.log(data.token)
    props.userLogin(data.token)
    setHasLoggedIn(true)
    props.LoggedIn(true) // 直接传true即可，不需要读状态
  }
)

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