React Router - 基于身份验证的重定向

Question

我正在构建一个登录页面示例来提高我的反应技能。但是，我无法弄清楚有关 React Router 的问题。我成功通过身份验证，应用程序将我带到受保护页面，但是当我刷新此受保护页面中的页面时，它显示空白页面。

当我尝试手动写入受保护的 URL 时，同样的事情发生了。（黑屏）

这是私有路由

    export const PrivateRoute = ({ 
        isAuthenticated, 
        component: Component,
        ...rest  
    }) => (
       <Route {...rest} render={(props) => {
           if (isAuthenticated) {
               return <Component {...props} />
        }
        else {
            return <Redirect to="/" />
        }

    }} />
);

const mapStateToProps = state => {
    console.log(state.userReducer.token);
    return {
        isAuthenticated: !!state.userReducer.token
    }
};

export default connect(mapStateToProps)(PrivateRoute);

这是公共路线

export const PublicRoute = ({ isAuthenticated, component: Component,  ...rest}) => (
    <Route {...rest} render={(props) => {
        if (isAuthenticated) { 
          return <Redirect to="/logged" /> 
        }
        else {
          return <Component {...props} />
        }
    }} />
  );

const mapStateToProps = state => ({
  isAuthenticated: !!state.userReducer.token
});

export default connect(mapStateToProps)(PublicRoute);

AppRouter

const AppRouter = () => {
    return (
    <BrowserRouter>
        <div>
            <PublicRoute path="/" component={LoginForm} exact />
            <PrivateRoute path="/logged" component={LoggedPage} />
        </div>
    </BrowserRouter>
    );
}
export default AppRouter;

最后一个是我创建的 AppRouter

const  jsx = (
    <Provider store={createStore(reducers)}>
        <AppRouter />
    </Provider>
)
ReactDOM.render(jsx, document.getElementById('root'));

感谢任何建议，提前致谢

Answer 1

当页面刷新时，它会丢失其状态以及您的登录状态。您应该将一些数据放入本地存储以保存您的 session 信息。在发送有关登录的操作之前，我将用户凭据保存到本地存储。每当页面重新加载时，我都会从本地存储中获取数据并将其作为登录操作发送。所以我保持 session 打开。

export function signInUser(user) {
  let userEmail = user.email;
  let userPassword = user.password;
  let credentials = {
    email: userEmail,
    password: userPassword
  };
  return dispatch => {
    axios
      .request({
        method: "post",
        url: loopBack + "/blogusers/login?include=user",
        data: credentials
      })
      .then(response => {
        //sets user data to local storage
        localStorage.setItem("id", response.data.id);
        localStorage.setItem("userId", response.data.userId);
        localStorage.setItem("userName", response.data.user.userName);
        localStorage.setItem("email", response.data.user.email);
        return dispatch(signInSuccess(response.data));
      })
      .catch(error => {
        return dispatch(signInFailure(error));
      });
  };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

//if session information is lost it gets data from            localstorage and set user data
export function setToken() {
   return dispatch => {
    let id = localStorage.getItem("id");
    let userId = localStorage.getItem("userId");
    let userName = localStorage.getItem("userName");
    let email = localStorage.getItem("email");
    let user = { id, userId, user: { email, userName } };
    return dispatch(signInSuccess(user));
  };
}

React Router - 基于身份验证的重定向

React Router - Auth based redirecting

reactjs

react-router

redux

react-redux

react-router-v4