Question

如果isAuthenticated()方法返回true，我想渲染组件，一切正常，直到我从axios响应返回true / false，看来诺言被忽略了。我应该如何修改代码，应该使用不同的方式？

这是我的isAuthenticate()：

 isAuthenticated = () =>{
        const cookie = new Cookie();

        axios.get("/api/check", {
            headers : {
                'Authorization' : 'Bearer ' + cookie.get('access_token')
            }})
            .then(function (response) {
                console.log(response.data.auth"); //returns actuall value
                return response.data.auth; // completely ignored
            })
            .catch(function (response) {
                console.log("Klaida isAuthenticated PrivateRoute");
                return false;
            });
    };

这是我的render()

render() {
        const {component: Component, ...rest} = this.props;

        const renderRoute = props => {
            const to = {
                pathname: '/login',
                state: {from: props.location}
            };
            if (this.isAuthenticated) {
                return (
                    <Component {...props} />
                );
            } else {
                return (
                    <Redirect to={to}/>
                );
            }
        };

        return (
            <Route {...rest} render={renderRoute}/>
        );
    }

编辑因此，我将逻辑从isAuthenticated()移到了componentWillMount()方法中，并添加了状态元素来知道何时完成提取：

componentWillMount() {
        const cookie = new Cookie();
        let self =this;
        axios.get("/api/check", {
            headers : {
                'Authorization' : 'Bearer ' + cookie.get('access_token')
            }})
            .then(function (response) {
                self.setState({
                    auth: response.data.auth,
                    res: true
                });
                console.log(self.state.auth)
            })
            .catch(function (response) {
                console.log("Klaida isAuthenticated PrivateRoute");
            });
    }

并且我在等待响应时做了条件渲染：

if(this.state.res){
             return (
                 <Route {...rest} render={renderRoute}/>
             );
         }else{
             return (
                 'loading..'
             );
         }

其他都一样

Answer 1

 isAuthenticated = () =>{
        const cookie = new Cookie();

        axios.get("/api/check", {
            headers : {
                'Authorization' : 'Bearer ' + cookie.get('access_token')
            }})
            .then(function (response) {
                console.log(response.data.auth"); //returns actuall value
                return response.data.auth; // <-- here you're returning this from your callback not from your isAuthenticated method
            })
            .catch(function (response) {
                console.log("Klaida isAuthenticated PrivateRoute");
                return false;
            });
}

和

if (this.isAuthenticated) // <-- here you're not even calling your method

正确的方法是在组件中具有某种状态，并根据响应内容设置状态，然后根据状态进行渲染

如何针对axios响应认证react-route

1 个答案: