Question

我试图通过执行以下操作将用户重新路由到用户尝试在浏览器地址栏上导航的网址：我检查了用户是否通过调用服务方法登录。如果cookie中的会话已过期或无效，它将返回401状态，我将重定向到登录屏幕

如果用户已登录，请允许。
如果用户未登录，请转到登录屏幕，登录后，路由到所需的网址。

此处的问题是，当用户输入以下网址时：http://url/app/order 它会被重定向到登录网址：http://url/auth/login 在用户输入其凭据后，虽然调度了操作，但不会调用Authorizedroute组件的呈现。在我再次单击“登录”按钮后调用它。

以下是我的登录组件

export class LoginForm extends React.Component {

componentWillReceiveProps(newProps){

    const { location, isAuthenticated, history } = newProps;
    if(isAuthenticated){

        if(location.state && location.state.referrer){
           history.push(location.state.referrer.pathname);
        }else{
            history.replace('/app');
        }
    }
}

render() {
    let usernameInput, passwordInput;
    const { showErrorMessage, errorMessage, onLogin } = this.props;
    return  (


        <div className='sme-login-center-view-container'>
            <HeaderComponent />

            <Col lg={4} lgOffset={4} sm={12} xs={12}>
                <Col lg={10} lgOffset={2} sm={4} smOffset={4}>
                    <Form className="sme-login-box" onSubmit={(e)=> {
                                                        e.preventDefault();
                                                        let creds = {username: usernameInput.value, password: passwordInput.value};
                                                        onLogin(creds);                                            
                                                    }
                                                }>

                            <span className='text-center sme-login-title-text'><h4>User Login</h4></span>

                        <FormGroup >                    
                            {errorMessage ? (<Alert bsStyle="danger"><strong>Error!</strong> {errorMessage}</Alert>) : null }
                        </FormGroup>

                        <FormGroup controlId="formHorizontalUsername">                    
                            <FormControl type="username" placeholder="Username" bsStyle="form-rounded"
                                inputRef={(ref) => {usernameInput = ref}}
                            />                
                            <FormControl.Feedback>
                                <span className="fa fa-user-o sme-login-input-feedback-span"></span>
                            </FormControl.Feedback>            
                        </FormGroup>

                        <FormGroup controlId="formHorizontalPassword">                   
                            <FormControl type="password" placeholder="Password" 
                                inputRef={(ref) => {passwordInput = ref}}/>                                   
                            <FormControl.Feedback>
                                <span className="fa fa-lock sme-login-input-feedback-span"></span>
                            </FormControl.Feedback>
                        </FormGroup>

                        <FormGroup>              
                            <Button type="submit" block >Login</Button>              
                        </FormGroup>

                    </Form>
                </Col>
            </Col>
        </div>

    );
}
}

LoginContainer

const mapStateToProps = state => {
    return state.authenticationReducer.login
}

export const Login = withRouter(connect( mapStateToProps,{ onLogin: loginUser })(LoginForm))

登录操作

export function requestLogin(creds) {
  return {
    type: LOGIN_REQUEST,
    isFetching: true,    
    isAuthenticated: false,
    creds
  }
}
export function receiveLogin() {
  return {
    type: LOGIN_SUCCESS,
    isFetching: false,
    isAuthenticated: true
  }
}
export function loginError(message) {
  return {
    type: LOGIN_FAILURE,
    isFetching: false,
    isAuthenticated: false,
    errorMessage: message
  }
}
export function loginUser(creds) {   
  return dispatch => {    
    dispatch(requestLogin(creds))    
        return axios.post(url, data)
            .then(response => {
                if (!response.status === 200) {                    
                    dispatch(loginError(response.statusText))                    
                } else {
                    dispatch(receiveLogin())
                }
            }
       ).catch(function (error) {
            dispatch(loginError(error.response.statusText))
        }
    )  }
    }

登录减速机：

export function login(state = {
        isFetching: false,
        isAuthenticated: false
      }, action) {

      switch (action.type) {
        case LOGIN_REQUEST:
        case LOGIN_SUCCESS:
        case LOGIN_FAILURE:
          return Object.assign({}, state, action)
        default:
          return state
      }
    }

授权路线组件

class AuthorizedRouteComponent extends React.Component {

  componentWillMount() {
    this.props.getUser();
  }
  render() {
    const { component: Component, pending, logged, location, ...rest } = this.props;
    return (
      <Route {...rest} render={props => {
        if (pending) return <div>Loading...</div>
            return logged
              ? <Component {...this.props} />
              :<Redirect to={{
                  pathname: '/auth/login',
                  state: { referrer: location }
            }}/>
          }} />
        )
      }
    }

    const mapStateToProps = state => {  
      return state.authenticationReducer.loggedUser
    }

    const AuthorizedRoute = connect(mapStateToProps, { getUser: getLoggedUser })(AuthorizedRouteComponent);

    export default AuthorizedRoute

查找记录的用户操作

    export function requestFetch() {
  return {
    type: FETCH_REQUEST,    
    pending: true,    
    logged: false
  }
}
export function receiveFetch(userData) {
  return {
    type: FETCH_SUCCESS,
    pending: false,
    logged: true,
    userData
  }
}
export function fetchError(message) {
  return {
    type: FETCH_FAILURE,
    pending: false,
    logged: false,
    errorMessage:message
  }
}
export function getLoggedUser() {  
  return dispatch => {    
    dispatch(requestFetch())
    return axios.get('/o3/rest/user/userdetails')
            .then(response => {

                if (!response.status === 200) {
                  dispatch(fetchError(response.statusText))                  
                } else {
                  dispatch(receiveFetch(response.data))
                }
            }
       ).catch(function (error) {
            dispatch(fetchError(error.response.statusText))
          }
        )
  }   
}

最后我的Logged用户缩减器

    export function loggedUser(state = initialState, action) {  
  switch (action.type) {
    case FETCH_REQUEST:
    case FETCH_SUCCESS:
    case FETCH_FAILURE:
      let obj = Object.assign({}, state, action);
      return obj;
    default:
      return state
  }
}

Answer 1

您可以使用localStorage将用户保存在您的操作创建者中，该用户负责获取用户：

export function getLoggedUser() {  
  return dispatch => {    
    dispatch(requestFetch())
    return axios.get('/o3/rest/user/userdetails')
            .then(response => {

                if (!response.status === 200) {
                  dispatch(fetchError(response.statusText))                  
                } else {
                  localStorage.setItem('userData',response.data)
                }
            }
       ).catch(function (error) {
            dispatch(fetchError(error.response.statusText))
          }
        )
  }   
}

然后在索引文件中询问：

const userData = localStorage.getItem('userData')
if(userData){
    store.dispatch({
        type: FETCH_SUCCESS,
        pending: false,
        logged: true,
        userData
    })
}

每次刷新页面或只输入http://url/app/order之类的URL时，将验证当前是否存在用户，如果存在，则会调度操作并更新您的状态。

使用redux

1 个答案: