对身份验证进行快速和护照错误处理

时间:2020-08-19 09:54:29

标签: reactjs express authentication passport.js

您好,我正在尝试通过react和express / passport进行身份验证 但是有错误 password.authenticate(“ local” ...... ==>此部分不起作用 postjoin工作正常,但 postLogin根本不起作用。 我找不到问题所在。 我在用猫鼬 我已经制定了护照策略和课程 并且postLogin和postJoin连接到express.Router(); 有人可以帮我吗? 谢谢你。

Login.js

import React, { useState } from 'react';
import styles from './Login.module.scss';
import { NavLink } from 'react-router-dom';
import Auxiliary from '../../hoc/Auxiliary/Auxiliary';
import Input from '../../components/UI/Input/Input';
import axios from 'axios';

const Login = (props) => {
    const [InputValue, setInputValue] = useState({
        email: {
            config: {
                type: "email",
                placeholder: "Email",
                value: '',
                name: 'email'
            }
        },
        password: {
            config: {
                type: "password",
                placeholder: "Password",
                value: '',
                name: 'password'
            }
        }
    });

    let inputArray = [];
    for(let key in InputValue) {
        inputArray.push({
            id: key,
            form: InputValue[key]
        })
    }
    console.log(inputArray);

    let inputForm = inputArray.map(data => (
        <Input
            key={data.id}
            elementType={data.id}
            elementPlaceholder={data.form.config.placeholder}
            elementValue={data.form.config.value}
            elementName={data.form.config.name}
            elementOnChange={(e) => changeHandler(e, data.id)}
            elementClassName={styles.LoginInput}
            />
    ));

    const changeHandler = (e, id) => {
        const updateInput = {...InputValue};
        updateInput[id].config.value = e.target.value;
        setInputValue(updateInput);
    };

    const submitHandler = (e) => {
        e.preventDefault();
        axios({
            method: 'post',
            url: 'https://graphql-api.run.goorm.io/login',
            withCredentials: true,
            data: {
                email: InputValue.email.value,
                password: InputValue.password.value,
            }
        })
        .then(response => {
            console.log(response);
        })
    };

    return (
        <Auxiliary>
            <form onSubmit={e => submitHandler(e)}>
                {inputForm}
                <input type="submit" value="submit" className={styles.LoginSubmit} />
            </form>
            <NavLink to="/join">
                <button className={styles.JoinBt}>Join</button>
            </NavLink>
        </Auxiliary>
    );
};
export default Login;

登录和注销控制器

export const postJoin = async (req, res, next) => {
    const {
        body: { name, email, password, passwordCheck }
    } = req;
    if(password !== passwordCheck) {
        res.status(400);
    } else{
        try {
            const user = await User({
                name,
                email
            });
            await User.register(user, password);
            next();
        } catch(error) {
            console.log(error);
        }
    }
};

export const postLogin = (req, res, next) => {
    console.log(req.session);
    passport.authenticate("local", (err, user, info) => {
        if (err) throw err;
        if(!user) res.send("No User Exists");
        else {
          req.logIn(user, (err) => {
            if (err) throw err;
            res.send("Successfully Authenticated");
          });
        }
    })(req, res, next);
};

export const postLogout = (req, res, next) => {
    req.logout();
    req.session.destroy();
    res.send("Logout success");
    next();
};

0 个答案:

没有答案