React Router v4 受保护路由刷新页面时总是重定向至登录页

这个问题我之前开发React应用时也碰到过，核心原因很明确：你的Auth类里的authenticated状态是存在内存中的，页面刷新时整个React应用会重新初始化，这个变量会被重置为初始值false，所以isAuthenticated()返回false，触发了重定向到登录页的逻辑。

要解决这个问题，我们需要把认证状态做持久化存储，比如用浏览器的localStorage，这样即使页面刷新，状态也能被读取回来。下面是具体的修改方案：

1. 修改auth.js，将状态持久化到localStorage #

把原来的Auth类改成这样，初始化时从localStorage读取状态，登录/登出时同步更新localStorage：

class Auth {
  constructor() {
    // 初始化时优先读取localStorage中的状态，默认未认证
    this.authenticated = localStorage.getItem('authenticated') === 'true';
  }

  login(cb) {
    this.authenticated = true;
    // 登录成功后把状态写入localStorage
    localStorage.setItem('authenticated', 'true');
    cb();
    console.log("login status" + this.authenticated)
  }

  logout(cb) {
    this.authenticated = false;
    // 登出时清除localStorage中的状态
    localStorage.removeItem('authenticated');
    cb();
  }

  isAuthenticated() {
    console.log("check status" + this.authenticated)
    return this.authenticated;
  }
}
export default new Auth();

2. 额外的安全建议（可选） #

如果你的后续开发中会引入JWT令牌这类认证凭证，建议把令牌也存在localStorage（或sessionStorage）中，并且在isAuthenticated()方法里增加令牌有效性的校验（比如检查令牌是否过期），避免用户通过手动修改localStorage来绕过认证。

这样修改后，用户登录成功的状态会被存在浏览器里，刷新页面时Auth类初始化会读取这个状态，就不会再跳回登录页了。

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