使用react和redux在每个页面上检查用户

在我 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 } }} </>;
};

然而,只有在浏览器重新加载时才会执行身份验证,所以如果我在应用程序中点击链接,数据就不会更新。我希望在加载任何私有路由时,都能检查用户。

解决方案:

创建一个单独的auth组件,并在每个路由中调用它,并检查用户是否通过了认证,如果用户通过了认证,则请求路由显示,否则返回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)


给TA打赏
共{{data.count}}人
人已打赏
未分类

如何在Flutter上改变TextFormField的高度和字体颜色。

2022-9-8 16:41:38

未分类

将一个用户的表导入到另一个Oracle SQL中。

2022-9-8 16:52:36

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索