Question

登录功能完成后，我将身份验证令牌保存在浏览器的localStorage中，以便可以对触发到服务器的每个操作进行身份验证。登录后，由于未重新渲染根组件，因此我必须刷新浏览器以检索我的令牌。有什么办法可以重新渲染index.js？我正在开发一个电子应用程序，因此无法刷新浏览器。

在index.js中

const AUTH_TOKEN = localStorage.getItem('user')

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

，但这只会在首次加载应用程序时呈现。商店和路线在内部定义。因此，登录后，身份验证令牌将保存在本地存储中，但不会在应用程序中更新。有什么想法吗？

Answer 1

您可以在保存auth令牌后仅设置axios授权标头。

Answer 2

这就是我所做的

在Auth操作中

            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 });

Answer 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>
        );
      }
    }

将Auth令牌保存在localStorage中（反应+ ROR）

3 个答案: