我有一个 PrivateRoute 来验证令牌是否有效并且它是一个异步函数.问题是:我对渲染视图的验证不起作用,它总是在渲染:
I have a PrivateRoute that verify if a token is valid and it's an async function. The problem is: my validation to render a view is not working, it's always rendering:
App.js
const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props => isAuthenticated() ? ( <Component {...props} /> ) : ( <Redirect to={{ pathname: "/", state: { from: props.location } }} /> ) } /> ); const Routes = () => ( <BrowserRouter> <Fragment> <Switch> <Route exact path="/" component={SignIn} /> <PrivateRoute path="/app" component={App} /> </Switch> <ModalContainer /> </Fragment> </BrowserRouter> ); export default Routes;auth.js
import axios from 'axios' export const isAuthenticated = async () => { const isValidRequest = false; const resp = await axios.get('127.0.0.1:8080...') data = resp.data; console.log(data); ....// more code return isValidRequest; }如何确保 PrivateRoute 将等待函数 isAuthenticated()?
How can I ensure that PrivateRoute will wait for function isAuthenticated()?
更新 1:
const Routes = () => { const [state, setState] = useState({isLoading: true, authenticated: false}); useEffect(() => { async function checkAuth() { const isAuth = await isAuthenticated(); setState({isLoading: false, authenticated: isAuth}); } }, []); if(state.isLoading) { return <div>Loading....</div> } return ( <BrowserRouter> <Fragment> <Switch> <Route exact path="/" component={SignIn} /> <PrivateRoute path="/app" isAuthenticated={state.authenticated} component={App} /> </Switch> <ModalContainer /> </Fragment> </BrowserRouter> ); } 推荐答案不是在所有 PrivateRoutes 中调用 isAuthenticated,而是在 Routes 组件中调用一次 这样检查只执行一次,然后将值作为 prop 传递.另请注意,在获取数据时保持加载状态
Instead of calling isAuthenticated in all PrivateRoutes, you call it once in your Routes component so that the check is only performed once and then pass on the value as prop. Also note that while the data is being fetched maintain a loading state
请注意,您的 isAuthenticated 函数是一个异步函数,因此您必须等到承诺得到解决.您可以使用 async-await 或使用传统的 promise 方法
Note, that your isAuthenticated function is an async function so you have to wait till the promise is resolved. You can use async-await or go by the traditional promise approach
const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => ( <Route {...rest} render={props => isAuthenticated ? ( <Component {...props} /> ) : ( <Redirect to={{ pathname: "/", state: { from: props.location } }} /> ) } /> ); const Routes = () => { const [state, setState] = useState({isLoading: true, authenticated: false}); useEffect(() => { async function checkAuth() { const isAuth = await isAuthenticated(); setState({isLoading: false, authenticated: isAuth}); } checkAuth(); }, []); if(state.isLoading) { return <Loader/> } return ( <BrowserRouter> <Fragment> <Switch> <Route exact path="/" component={SignIn} /> <PrivateRoute path="/app" isAuthenticated={state.authenticated} component={App} /> </Switch> <ModalContainer /> </Fragment> </BrowserRouter> ); } export default Routes;更新:由于您没有使用react v16.8.0及以上版本,可以使用类组件来实现上述逻辑
Update: Since you do not use v16.8.0 or above of react, you can implement the above logic by using a class componnet
class Routes extends React.Component { state = {isLoading: true, authenticated: false}; async componentDidMount() { const isAuth = await isAuthenticated(); this.setState({isLoading: false, authenticated: isAuth}); } render() { if(state.isLoading) { return <Loader/> } return ( <BrowserRouter> <Fragment> <Switch> <Route exact path="/" component={SignIn} /> <PrivateRoute path="/app" isAuthenticated={state.authenticated} component={App} /> </Switch> <ModalContainer /> </Fragment> </BrowserRouter> ); } } export default Routes;更多推荐
PrivateRoute
发布评论