Fatal编程技术网
  • reactjs/
  • Reactjs 重定向反应路由器dom身份验证不工作

Reactjs 重定向反应路由器dom身份验证不工作

reactjs redux

Reactjs 重定向反应路由器dom身份验证不工作,reactjs,redux,Reactjs,Redux,登录后，它不会失败地重定向到电池页，因为路由认为它阻止的头中没有令牌。我已经试了两天多了，请给我一些好的灵魂。后端的所有逻辑都已完美运行。无法替换用户登录和生成令牌的路径。系统将其重定向到电池路径 登录类 import React, { Component } from 'react' import IntanceAxios from '../../components/meuaxios' // import GlobalStyle from './style.jsx'; import Form

登录后，它不会失败地重定向到电池页，因为路由认为它阻止的头中没有令牌。我已经试了两天多了，请给我一些好的灵魂。后端的所有逻辑都已完美运行。无法替换用户登录和生成令牌的路径。系统将其重定向到电池路径

登录类

import React, { Component } from 'react'
import IntanceAxios from '../../components/meuaxios'
// import GlobalStyle from './style.jsx';
import Form from './Form.jsx'
import { /* useSelector, useDispatch ,*/ connect } from 'react-redux';
import { withRouter } from "react-router-dom";
import history from '../../routes/History';

class Login extends Component {

    constructor() {
        super();
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleEmailChange = this.handleEmailChange.bind(this);
        this.handlePasswordChange = this.handlePasswordChange.bind(this);

        this.state = {
            email: JSON.parse(localStorage.getItem('isRememberUser')) ? localStorage.getItem('user') : undefined,
            password: undefined,
            signIn: {
                success: undefined,
                message: undefined,
                load: undefined,
                type_error: 'error'
            },
            fieldErrors: {
                email: {
                    message: '',
                    isValid: true
                },
                password: {
                    message: '',
                    isValid: true
                }
            },
            logged: false,
            loadedOne: true
        }
        document.title = "Login"
    }

    // Initialization
    componentWillMount() {
        let isRememberUser = JSON.parse(localStorage.getItem('isRememberUser'))

        if (isRememberUser && localStorage.getItem('user') === null) {
            localStorage.removeItem('isRememberUser')
        }
    }

    // Monteded
    componentDidMount() {
        this.setState({
            loadedOne: false
        })
    }

    validEmail = email => {
        // eslint-disable-next-line no-useless-escape
        const validEmailRegex = RegExp(/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i);
        return validEmailRegex.test(email)
    }

    handleEmailChange(e) {
        var value = e.target.value

        let fieldEmail = this.validEmail(value) ? true : false;

        let message = fieldEmail ? '' : 'Email esta inválido'

        this.setState(prevState => {
            return {
                email: value,
                fieldErrors: {
                    email: {
                        message: message,
                        isValid: fieldEmail
                    },
                    password: {
                        message: prevState.fieldErrors.password.message,
                        isValid: prevState.fieldErrors.password.isValid
                    }
                }
            }
        })
    }

    handlePasswordChange(e) {
        var value = e.target.value
        let fieldPassoword =
            value.length < 8 ? false : true;

        let message = fieldPassoword ? '' : 'A senha deve conter mais de 8 caracteres!'
        this.setState(prevState => {
            return {
                password: value,
                fieldErrors: {
                    password: {
                        message: message,
                        isValid: fieldPassoword
                    },
                    email: {
                        message: prevState.fieldErrors.email.message,
                        isValid: prevState.fieldErrors.email.isValid
                    }
                }
            }
        })
    }

    isValid() {
        let { email, password } = this.state.fieldErrors
        if (email.isValid && password.isValid) {
            return true
        }
        return false
    }

    setUserRemember = () => {
        if (JSON.parse(localStorage.getItem('isRememberUser'))) {
            localStorage.setItem('user', this.state.email)
        }
        return;
    }

    setToken = token => {
        return localStorage.setItem('ISA)_TOKEN', token);
    }

    async handleSubmit(event) {
        event.preventDefault();

        if (!this.state.email || this.state.email === undefined || this.state.password === undefined || !this.state.password) {

            this.setState(prevState => {
                return {
                    ...this.state,
                    signIn: {
                        message: 'E-mail ou senha vazio',
                        success: false,
                        type_error: 'error'
                    }, logged: false,

                    fieldErrors: {
                        password: {
                            message: prevState.fieldErrors.password.message,
                            isValid: false
                        },
                        email: {
                            message: prevState.fieldErrors.email.message,
                            isValid: false
                        }
                    }
                }
            })
            return null;
        }

        if (this.isValid()) {

            this.setUserRemember();
            this.setState({
                ...this.state,
                signIn: {
                    load: true,
                    success: undefined,
                    type_error: undefined
                }
            });

            // console.log(dataToSend);
            let dataToSend = {
                email: this.state.email,
                password: this.state.password
            }
            let url = '/auth/login';

            await IntanceAxios.post(url, dataToSend)
                .then(response => response.data)
                .then(responseData => {

                    if (responseData.success) {

                        // this.props.disparaLogin();
                        // this.props.verificarToken();
                        this.setToken(responseData.token)

                        this.setState({
                            ...this.state,
                            signIn: {
                                success: true,
                                message: responseData.message,
                            }, logged: true
                            , status: true
                        });
                        let { from } = this.props.location || { from: { pathname: "/batteries" } };
                        console.log(from)
                        history.replace(from)
                        // history.replace(from);

                        // REDIRECIONA PARA O LOCAL RAIZ, FEITO NA UNHA
                        // this.setState({ redirectToReferrer: true });
                    } else {

                        this.setState({
                            ...this.state,
                            signIn: {
                                success: false,
                                message: responseData.message,
                                type_error: 'error'

                            }, status: false
                            , logged: false,
                        })
                    }

                }).catch(error => {
                    this.removeRember();
                    this.setState({
                        ...this.state,
                        signIn: {
                            success: false,
                            message: error.message,
                            type_error: 'error'

                        }, status: false
                        , logged: false,
                    });
                    console.log(error);
                });
        } else {
            this.removeRember()

            return;

        }

    }

    removeRember = () => {
        if (localStorage.getItem('user') !== null) {
            localStorage.removeItem('user')
            localStorage.setItem('isRememberUser', false)
        }
        return;
    }


    render() {
        const { signIn, fieldErrors, email, password, loadedOne } = this.state
        return (
            <>
                {/* <Header /> */}
                {/* <GlobalStyle /> */}
                <Form loadedOne={loadedOne} signIn={signIn} email={email} password={password} fieldErrors={fieldErrors} handleSubmit={this.handleSubmit.bind()} handleEmailChange={this.handleEmailChange.bind()} handlePasswordChange={this.handlePasswordChange.bind()} />
            </>
        )
    }
}

// export default Login;

const mapearAcoes = dispatch => {
    return {
        disparaLogin: () => dispatch({ type: 'SIGN_IN' }),
        verificarToken: () => dispatch({ type: 'vericarToken' })
    }
}

export default withRouter(Login);
上述代码通过尝试“将文本类型的受控输入更改为非受控”触发附加（非相关）警告。要解决此问题，请将
FormComponent
切换到a，使用组件状态管理输入值和验证，并将所需的方法绑定为prop以处理登录请求或某些异步验证

与自动验证问题相关，这似乎是因为当应用程序加载时，
路由器
模块已经设置了
responseIsAuthenticated
值，提前评估令牌状态。要确保始终评估当前状态，必须在
渲染
道具中调用
isAuthenticated
方法：

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route  {...rest} render={props => (
        // Call to isAuthenticated here.
        isAuthenticated() ? (
            <Component {...props} />
        ) : (
                <Redirect to={{ pathname: "/login", state: { from: props.location } }} />
            )
    )} />
)
上述代码通过尝试“将文本类型的受控输入更改为非受控”触发附加（非相关）警告。要解决此问题，请将
FormComponent
切换到a，使用组件状态管理输入值和验证，并将所需的方法绑定为prop以处理登录请求或某些异步验证

与自动验证问题相关，这似乎是因为当应用程序加载时，
路由器
模块已经设置了
responseIsAuthenticated
值，提前评估令牌状态。要确保始终评估当前状态，必须在
渲染
道具中调用
isAuthenticated
方法：

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route  {...rest} render={props => (
        // Call to isAuthenticated here.
        isAuthenticated() ? (
            <Component {...props} />
        ) : (
                <Redirect to={{ pathname: "/login", state: { from: props.location } }} />
            )
    )} />
)
我爱你，伙计，你解决了我的问题。非常感谢。很快回答了我的问题，谢谢。我爱你，伙计，你解决了我的问题。非常感谢。很快回答了我的问题，谢谢。 


export const isAuthenticated = () => {
    // let autheticated = false;
    let token = localStorage.getItem('ISA)_TOKEN');

    if (!token) {
        // this.redirectToReferrer(false);
        // let autheticated = false

        return false

    } else {

        let url = 'http://localhost:5000/auth/verifytoken ';
        fetch(url, {
            method: "GET",
            body: undefined,
            headers: {
                "Content-Type": "application/json",
                "authorization": `Bearer ${token}`
            }
        })
            .then(response => response.json())
            .then(responseData => {
                if (!responseData.success) {
                    localStorage.removeItem('ISA)_TOKEN');
                    window.location.replace('/')
                    return null;
                }

                // this.redirectToReferrer(true);


            }).catch(error => {
                localStorage.removeItem('ISA)_TOKEN');
                window.location.replace('/')
            });



        return true;
    }

}


const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route  {...rest} render={props => (
        // Call to isAuthenticated here.
        isAuthenticated() ? (
            <Component {...props} />
        ) : (
                <Redirect to={{ pathname: "/login", state: { from: props.location } }} />
            )
    )} />
)

render() {
    const { signIn, fieldErrors, email, password, loadedOne } = this.state

    if(signIn.success)
      return <Redirect to={{ pathname: "/batteries"}} />;

    /* <Form /> */