Question

如果localStorage中存在refresh_token，我想自动登录用户，但是我的问题是，在应用启动时，我无法将状态更改为最初通过身份验证。我尝试了componentWillMount，但是我第一次变老了，然后又得到了更新状态。 <PrivateRoute>在这里被叫2-3次，不知道我在哪里犯错。

预期流量

自动登录
具有新状态的PrivateRoute

App.js

import React, { Component } from 'react'
import WrappedLoginForm from './containers/Login'
import ChatApp from './containers/Chat'
import { connect } from 'react-redux'
import { checkAuthentication } from './store/actions/auth'
import PrivateRoute from './route'
import {
    BrowserRouter as Router,
    Route
} from "react-router-dom";

class App extends Component {

    componentWillMount() {
        this.props.autoLogin()
    }

    render() {
        return (
            <Router>
                <Route path='/login' component={WrappedLoginForm} />
                <PrivateRoute path="/" component={ChatApp} authed={this.props.isAuthenticated} />
            </Router>
        )
    }
}


const mapStateToProps = state => {
    return {
        isAuthenticated: state.isAuthenticated,
        loading: state.loading
    }
}

const mapDispatchToProps = dispatch => {
    return {
        autoLogin: () => {
            dispatch(checkAuthentication())
        }
    }
}


export default connect(
    mapStateToProps,
    mapDispatchToProps
)(App)

route.js

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({ component: Component, authed, ...rest }) => {
  console.log('aaa')
  return (<Route
    render={props => (
      authed
        ? <Component />
        : <Redirect to="/login" />
    )}
  />)
};

export default PrivateRoute;

action.js

export const checkAuthentication = () => {
    return dispatch => {
        dispatch(authStart())

        let refresh_token = localStorage.getItem('refresh_token')
        axiosInstance.post('/api/token/refresh/', {
            refresh: refresh_token
        }).then(res => {
            if (res.status === 200)  {
                localStorage.setItem("access_token", res.data.access)
                dispatch(loginSuccess())
            }
        }).catch(error => {
            console.log("balle")
            dispatch(loginFailed(error))
        })
    }
}

Answer 1

首先，请确保您商店中的isAuthenticated属性默认为false。

对于PrivateRoute使用：

{this.props.isAuthenticated
        ?  <PrivateRoute path="/" component={ChatApp} />
        : null
}

代替<PrivateRoute path="/" component={ChatApp} authed={this.props.isAuthenticated} />

App启动时如何刷新JWT令牌

1 个答案: