首页 文章

在localStorage中保存身份验证令牌（React ROR）

提问于
浏览 次
0

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

in index.js

const AUTH_TOKEN = localStorage.getItem('user')

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

但这只会在第一次应用加载时才会呈现 . 存储和路由在里面定义 . 因此，登录后，身份验证令牌将保存在localstorage中，但未在应用程序中更新 . 有任何想法吗？

ruby-on-rails reactjs redux electron

3 回答

  • 1

    您可以在保存身份验证令牌后设置axios授权标头 .

    回复于
  • 0

    你可以管理那里的令牌，它在令牌上的更新到期，令牌更改

    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>
        );
      }
    }
    回复于
  • 0

    所以这就是我所做的

    In Auth action

    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 });
    回复于

相关问题