반응 인증

할 것

Les는 인증 기능을 공정하게 따르기를 선택합니다.

Formulaire pour envoie du mot de passe et du nom d'utilisateur

Un système de vérification nom d'utilisateur/mot de passe

Un moyen de stocker le userId dans le client

공식

Le Formulaire doit contenir un nom d'utilisateur ou adress mail, Combiner avec un mot de pass.

Ces 입력 doivent être envoyé au back à l'aide d'axios ou de fetch. La requête doit envoyer avec la methode POST sur l'url défini au niveau de votre API.

fetch(
    'http://auth-react.com/api/login',
    {
        email: email,
        password: password
    },
    headers : myHeaders,
    method: POST
)

확인

Dans le routeur qui est appelé par le Formulaire une vérification de la concordance utilisateur/mot de passe doit être faites.

avec une base de données mongodb의 예

const express = require('express')
const router = express.Router()

router.post('/login', async(req, res) => {
    const {email, mot_de_passe} = req.body

     try {
         // Recherche d'un utilisateur dans la base de données
        let utilisateur = await Utilisateur.findOne({ email })

        // Aucun utilisateur trouvé
        if (!utilisateur) {
            return res.status(400).json({ error: "L'email est invalide" })
        }

        if (mot_de_passe != utilisateur.mot_de_passe) {
            return res.status(400).json({ error: 'Mot de passe invalide' })
        }

        return res.status(200).json({
            id: utilisateur.id,
            nom: utilisateur.nom,
            prenom: utilisateur.prenom,
        })
    } catch (err) {
        res.status(500).json({ error: 'Serveur erreur' })
    }
}) 

Remarque : si le mot de passé est chiffre ou hasher il faut passer à utiliser la méthode de comparaison de l'outil de chiffrement/hashage utilisé

재고

Une fois que la requête nous retourne l'utilisateur connecté, il suffit de placer le userId et les autres informations nécessaires dans le sessionStorage.

sessionStorage.setItem('user', JSON.stringify(response.data))

Remarque: la création de la variable de session se fait dans le then de la requête fetch ou axios.