Проверяйте пользователя на каждой странице с помощью реакции и редукса - PullRequest
Новая
       6

Проверяйте пользователя на каждой странице с помощью реакции и редукса

0 голосов
/ 24 апреля 2020

В моем файле App.tsx есть эта настройка 

const App: React.FC = props => {
  const [hasRendered, setHasRendered] = useState(false);

  const dispatch = useDispatch();
  const isAuth = authMiddleWare();

  useEffect(() => setHasRendered(true), [hasRendered]);

  if (!hasRendered && isAuth !== null) {
    if (isAuth) {
      dispatch(getUser());
    } else {
      dispatch(logoutUser());
    }
  }
  ...
  <PrivateRoute path="/app" component={Dashboard} />
}

const PrivateRoute = ({ component, location, ...rest }: any) => {
  const dispatch = useDispatch();
  const authenticated = useSelector((state: RootState) => state.user.authenticated);

  return <>{authenticated ? React.createElement(component, props) : <Redirect to={{ pathname: LoginRoute, state: { from: props.location } }} </>;
};

Однако аутентификация выполняется только при перезагрузке браузера, поэтому данные не обновляются, если я нажимаю на ссылку в моем приложении. Я хочу, чтобы пользователь проверялся при загрузке любого частного маршрута.

1 Ответ

0 голосов
/ 24 апреля 2020

Создайте отдельный компонент аутентификации и вызывайте его на каждом маршруте и проверяйте, аутентифицирован ли пользователь или нет. если пользователь прошел аутентификацию, то запрошенный маршрут покажет возвращение страницы 404 или домашней страницы.

или проверьте каждую страницу, чтобы проверить свою аутентификацию, поместив этот код в раздел componentditmount 



import React, { Component } from 'react'
import { connect } from "react-redux";
import { userLoginAction } from "./store/actions/userLogin";
import * as actionType from "./store/actions/actionType";
import { Redirect } from 'react-router-dom';
class componentName extends Component {
    constructor(props){
        super(props)
        this.state={
            isMount:false
        }
    }
    componentDidMount(){
        const token = localStorage.getItem("token");
    if (token != null && this.props.loginStatus === false) {
      // this.userLoginData(token)
      this.props.auth();
    }
    this.setState({ isMount: true });
    }
  render() {
    return (
      <>
      {this.state.isMount?this.props.auth===false?<Redirect from ='/' to='/login' />:
     <p>Hello World!</p> :<div>Loging.....</div>
      }

      </>
    )
  }
}

const mapGetState = (state) => {
    return {
      loginStatus: state.usrReducer.login_st,
      auth: state.usrReducer.auth,
    };
  };

  const mapDispatchState = (dispatch) => {
    return {
      login: (data) => dispatch({ type: actionType.LOGIN_ST, payload: data }),
      auth: (data) => dispatch(userLoginAction(data)),
    };
  };
  export default connect(mapGetState, mapDispatchState)(componentName)
...