Authenticaã§使用JWT
#javascript #react #node #jwt

本文最初于2021年9月7日在我的LinkedIn个人资料上发表。一年多后，经过代码进行了一些改进，我决定发布更新的版本。在本文中，您将使用 border 和后端，使用 reactjs找到使用 jwt 的数据访问控制实现的示例和 nodejs 。为了更好地理解，我们需要了解基本协议和HTTP。

想象一下，在网络和移动开发过程中，对某些信息的访问控制至关重要。有必要确保仅由授权人员访问信息。用于实现此目标的工具之一是JavaScript Web令牌或 jwt 。

o jwt 使用键对令牌，使用键对blick/private药丸，提供了一种安全替换客户和服务器之间的信息的方法。此过程使您可以确保具有私钥的部分是签署令牌的部分。有关更多信息，请访问https://jwt.io/introduction。

我在下面描述了我在葡萄酒爱好者的社交网络项目中执行此功能的过程。

通过签名令牌来验证

要登录，我们需要为该人的凭据（在这种情况下的电子邮件和密码）中要求。服务器在数据库中检查凭据是否正确。如果是这样，则签署一个令牌，并发送给客户，有效期为20分钟。接收到的令牌以 cookie 的方式保存在浏览器中，并将其重定向到显示所请求的信息的路线。

当我们单击“发送”时，组件的“ handlesubmit”功能将调用，我们将填写电子邮件和密码：

import { FormEvent, useState } from 'react'
import { useNavigate } from "react-router-dom";
import axios from "axios";
import Cookie from "js-cookie";

async function handleSubmit(e: FormEvent){
  e.preventDefault();
  try {
    const result = await axios.post("http://localhost:3333/login", {
      email,
      password,
    });
    Cookie.set("token", result.data.token);
    navigate("/dashboard");
  } catch (error: any) {
      if (error.response.data.message === "E-mail não cadastrado!") {
        setEmailError(error.response.data.message);
        }
      if (error.response.data.message === "Senha incorreta!") {
        setPasswordError(error.response.data.message);
      }
    }
}

no 后端，更准确地说是在享受的controller 上，母亲©todo token 的签名“ 。为此，首先，图书馆 "express-validator" 的todo “验证” 。之后，如果在数据库中注册了任何有知情凭据的人。在这些验证中，令牌与客户要求的数据一起签名并作为响应发送。如果这些验证失败，则将错误消息发送给客户。

const { validationResult } = require("express-validator");
const bcrypt = require("bcryptjs");
const db = require("../database/models");
const jwt = require("jsonwebtoken");

const UserController = {
  userLogger: async(req, res) => {
    const errorsList = validationResult(req);
    if(errorsList.isEmpty()){
      const { email, password } = req.body;
      const usr = await db.User.findOne({
        where: { email }
      });
    if ((usr.mail === email) && (bcrypt.compareSync(password, usr.password))){
      const profile = {
        id: usr.id,
        name: usr.name,
        surname: usr.surname,
        description: usr.description,
        email: usr.email,
        avatar_picture: usr.avatar_picture
      }
      const token = jwt.sign({id: profile.id}, process.env.SECRET, {expiresIn: "20m"});
      return res.json({auth: true, token, profile})
    } else {
      return res.status(500).json({message: 'Login Inválido'});
  }
}

令牌的验证

要访问私人信息，如果令牌是徒劳的，则必须查看服务器。为此，有必要包括在这种情况下以cookie保存的令牌 - > 

import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import Cookies from "js-cookie";

export function Dashboard() {
  const [parameter, setParameter] = useState("");
  const [user, setUser] = useState({
    name: "",
    surname: "",
    description: "",
    avatar_picture: "",
    background_picture: "",
  });
  const [brotherhoods, setBrotherhoods] = useState([]);
  const [events, setEvents] = useState([]);
  const token = Cookies.get("token");
  const navigate = useNavigate();

  useEffect(()=>{
    fetch('http://localhost:3333/dashboard', {
      headers: { authorization: `Bearer ${token}`}
    }).then(
      response => response.json()
     ).then(
        response => {
          setUser(response.User);
          setBrotherhoods(response.brotherhoods);
          setEvents(response.events)
        }).catch(
            error => navigate('/login')
          );
  }, [token, navigate]);

在咨询并返回请求的信息之前，middleware负责验证令牌是否 requilisit£©vádê。如果没有，则拒绝获取信息。

const jwt = require("jsonwebtoken");
  module.exports = (req, res, next) => {
    const token = req.headers.authorization.split(" ")[1];
    const decoded =jwt.verify(token, process.env.SECRET, function (err, decoded) {
     if(err){
       return res.status(401).send({
         mensagem: "Sessão expirada. Por favor, logue novamente"
       });
     return decoded;
  });
  req.headers.authorization = decoded;

  next();
}

渲染客户界面中的私人信息

使用挂钩 usestate 和 useefect 收到的信息作为请求的响应归因于方差，并将其作为属性发送到其组件，以便可以呈现它们。 

<BrotherhoodsSection brotherhoods={brotherhoods} />
<EventsSection events={events} />

在本文中，我邀请您遵循 javascript Web令牌的整个签名和验证过程，因为客户对服务器响应的请求。我们可以按以下方式总结流程：

  1. 客户提出要求，发送其凭据;
  2. 服务器收到申请，提供凭据，并在成功的情况下签署新的令牌并将其退还给客户;
  3. 在我们的示例中，令牌被客户收到，并在浏览器中保存为 cookie ;
  4. 当您需要访问受保护的信息时，客户会在浏览器中寻求 cookie 并将其发送到服务器的申请标题;
  5. 已验证的服务器如果令牌是徒劳的，并且由需要信息的客户签署。如果是这样，请发送请求的数据，如果您构成，则发送一条消息，说明要进行新的登录，重新启动周期。

如果您到达了这个，请感谢您的关注！您会以不同的方式实施此功能吗？您知道一种使该代码更有效的方法吗？你有生命吗？我很想得到您的反馈。

atm©axima！