reactjs - 如何在使用本地存储和 react-redux 重定向到登录页面之前检查用户是否已登录？

Question

我正在使用 HOC 进行身份验证路由。我想在重定向到登录页面之前检查本地存储中是否有登录用户，但是当应用程序加载时它首先重定向然后检查本地存储。

应用程序.js

class App extends Component {
  render() {
    return (
      <div className="App">
        <BrowserRouter>
          <Route render={({ history }) => (
            <div className="App">
              <Navbar currUser={this.props.currUser} logout={this.props.logout} history={history}/>
              <Switch>
                <Auth 
                    exact path="/" 
                    component={HomePage} 
                    currUser={this.props.currUser} 
                    loadRecipes={this.props.loadRecipes} 
                    recipes={this.props.recipes} 
                />
                <Route
                    path="/login" 
                    render={(props) => (<LoginPage {...props} login={this.props.login} />)}
                />
              </Switch>
            </div>
          )} />
        </BrowserRouter>
      </div>
    );
  }
}

const Auth = ({ component: Component, ...rest }) => {
  const currUser = rest.currUser;
  return (
    <Route {...rest} render=
      {props =>
        currUser ?
          (<Component {...props}  {...rest} />) :
          (<Redirect to={{ pathname: "/login", state: currUser }} />)
      } />
  )
}


const mapStateToProps = (state) => {
  return {
    currUser: state.login.currUser,
    recipes: state.recipe.recipes,
    recipe: state.recipe.recipe,
    user: state.user.userToDisplay,
  }
}

const mapDispatchToProps = {
  ...loginActions,
  ...recipeActions,
  ...userActions
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

登录操作.js

export const login = (credentials) => {
    return async (dispatch) => {
        try {
            const user = await UserService.login(credentials);
            dispatch({ type: 'SET_CURR_USER', user })
            return true;
        } catch (err) {
            return false
        }
    }
}

用户服务.js

async function login(credentials) {
    try {
        const { data } = await axios.post(`${BASE_URL}/login`, credentials);
        StorageService.saveToLocal(USER_KEY, data);
        return data;
    } catch (err) {
        throw err;
    }
}

我需要做什么才能让应用程序首先检查是否有登录用户，如果没有，重定向？

谢谢！

编辑：

LoginReducer.js

const loginReducer = (state = {
    currUser: ''
}, action) => {
    switch (action.type) {
        case 'SET_CURR_USER':
            return {
                ...state,
                currUser: action.user
            }
        default:
            return state;
    }
}

export default loginReducer;

存储服务.js

export default {
    getFromLocal,
    saveToLocal,
    removeFromLocal
}
function getFromLocal(key) {
    const res = localStorage.getItem(key)
    return res ? JSON.parse(localStorage.getItem(key)) : null
}
function saveToLocal(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
}

function removeFromLocal(key) {
    localStorage.removeItem(key);
}

Auth中当前用户的日志：

• 首先（当应用程序加载时） - currUser: ''
• 登录并重定向到主页后 - currUser: {_id: "5cc15863d1a9f045fcbd6d85", name: "amanda"}

标签： reactjsreact-reduxreact-routerlocal-storage