第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

ReactJs,如何等待我的函數(shù)返回一些東西

ReactJs,如何等待我的函數(shù)返回一些東西

www說 2022-08-04 15:57:40
我有一個函數(shù)調(diào)用isAuthenticated,可以像這樣檢查令牌的有效性:isAuthenticated = async () => {        const data = await request.call({            url: `http://localhost:1337/utilisateurs/VerifyUserTok`,            method: `post`,            parameters : {                authorization: `bearer ${sessionStorage.getItem(`token`)}`            }        });        if (data.IsValide){            return true;        } else {            return false;        }    }在我受保護的路由中,如果上一個函數(shù)返回 false,我不會重定向該人。但是在 protected.route.js 文件中,該函數(shù)在第一次返回時進入,而無需等待我的 isAuthenticated 函數(shù)返回一些內(nèi)容:import React from 'react';import { Route, Redirect } from 'react-router-dom';import auth from './auth.js'import NavMenu from './NavMenu';export const ProtectedRoute = ({ component: Component, ...rest }) => {    return (        <Route             {...rest}             render = {props => {                if(auth.isAuthenticated()){                    return <div className="page-body">                                <Route>                                    <NavMenu/>                                    <div className="right-body">                                        <Component {...props}/>                                    </div>                                </Route>                            </div>                } else {                    return <Redirect to={                        {                            pathname: "/",                            state: {                                from: props.location                            }                        }                         } />                }            }}        />    );}
查看完整描述

2 回答

?
慕雪6442864

TA貢獻1812條經(jīng)驗 獲得超5個贊

您將需要一些狀態(tài)來保存您要查找的信息,并且您需要在效果中執(zhí)行身份驗證查找。


當(dāng)然,您可以選擇在身份驗證檢查進行時以某種方式顯示加載指示器,但您可以根據(jù)需要找出該機制。


import React, { useState, useEffect } from 'react';

import { Route, Redirect } from 'react-router-dom';

import auth from './auth.js'

import NavMenu from './NavMenu';


export const ProtectedRoute = ({ component: Component, ...rest }) => {

    const [isAuthed, setIsAuthed] = useState(false);

    const [isLoaded, setIsLoaded] = useState(false);


    // Assuming you just want to check on initial render

    useEffect(() => {

      let mounted = true;

      const checkAuth = async () => {

        const authed = await auth.isAuthenticated();

        if (mounted) {

          setIsAuthed(authed);

          setIsLoaded(true);

        }

      checkAuth();

      return () => {

        mounted = false;

      }

    }, [])


    return !isLoaded ? "Loading..." : (

        <Route 

            {...rest} 

            render = {props => {

                if(isAuthed){

                    return <div className="page-body">

                                <Route>

                                    <NavMenu/>

                                    <div className="right-body">

                                        <Component {...props}/>

                                    </div>

                                </Route>

                            </div>

                } else {

                    return <Redirect to={

                        {

                            pathname: "/",

                            state: {

                                from: props.location

                            }

                        }     

                    } />

                }


            }}

        />

    );

}


查看完整回答
反對 回復(fù) 2022-08-04
?
忽然笑

TA貢獻1806條經(jīng)驗 獲得超5個贊

您可以為結(jié)果處理三種不同的狀態(tài)。未定義,真實和虛假。isAuthenticated()

  • 未定義:您的組件將顯示一個加載程序,等待您的API調(diào)用結(jié)束

  • 真/假:與你的行為相同。

只需將其存儲在變量中并執(zhí)行類似操作即可:

// ... Ommited code

if(isAuthed === undefined) return <Loader />;

return (

// ... Your code with true/false condition


查看完整回答
反對 回復(fù) 2022-08-04
  • 2 回答
  • 0 關(guān)注
  • 135 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號