在 localStorage 中保存 Auth 令牌（React + ROR）答案

【问题标题】：Saving Auth token in localStorage (React + ROR)在 localStorage 中保存 Auth 令牌（React + ROR）
【发布时间】：2018-07-12 06:32:09
【问题描述】：

登录功能后，我将身份验证令牌保存在浏览器的本地存储中，以便我可以验证向服务器触发的每个操作。登录后我必须刷新我的浏览器来检索我的令牌，因为根组件没有重新呈现。有没有办法重新渲染 index.js？我正在构建一个电子应用程序，所以浏览器刷新不是一个选项。

在 index.js 中

const AUTH_TOKEN = localStorage.getItem('user')

if(AUTH_TOKEN){
  axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
  store.dispatch({type: AUTHENTICATED});
}

但这只会在应用程序第一次加载时呈现。存储和路由是在里面定义的。因此，登录后身份验证令牌将保存在本地存储中，但不会在应用程序中更新。有什么想法吗？

【问题讨论】：

标签： ruby-on-rails reactjs redux electron

【解决方案1】：

你可以在保存 auth token 后设置 axios 授权头。

【讨论】：

【解决方案2】：

这就是我所做的

在身份验证操作中

            localStorage.setItem('user', response.data.auth_token);
            localStorage.setItem('name', response.data.user.name);
            localStorage.setItem('email', response.data.user.email);
            axios.defaults.headers.common['Authorization'] = response.data.auth_token;
            dispatch({ type: AUTHENTICATED });

【讨论】：

【解决方案3】：

您可以像那里一样管理令牌，令牌过期时更新，令牌更改

const watchToken = (delay) => {
      return setTimeout(() => {
        myApi.getToken().then(res => {
          if (res.token) {
            store.dispatch({ type: AUTHENTICATED })
          } else {
            store.dispatch({ type: NOT_AUTHENTICATED })
          }
        })
      }, delay);
    }

    class App extends Component {
      tokenManager;

      constructor() {
        super();
        this.state = {
          isReady: false
        };
      }

      componentWillMount() {
        this.tokenManager = watchToken(20000)
      }

      componentWillUpdate(nextProps, nextState) {
        if (nextProps.TOKEN !== this.props.TOKEN) {
          this.tokenManager = watchToken(20000);
        }
      }

      componentWillUnmount() {
        this.tokenManager.clearTimeout();
      }

      render() {
        return (
          <div>
          </div>
        );
      }
    }

【讨论】：