JWT란?

JWT는 JSON 웹 토큰을 나타냅니다.

왜 JWT야?

JWT는 각 방면에서 JSON 대상으로 정보를 안전하게 전송하는 데 사용되는 치밀하고 자체적인 방식을 정의했다.네가 그것을 사용할 수 있는 예는 권한 수여이다.
오늘은 JWT와 Ruby on Rails 백엔드 및 React 프런트엔드 설정을 사용하여 로그인하는 방법에 대해 설명합니다.

백엔드

애플리케이션 컨트롤러

우리는 세 가지 방법이 필요하다.키, 인코딩, 디코딩 방법

비밀 키

def secret_key
    "anything" #a string of your choosing
end

우리는 인코딩 방법에서 그것을 사용할 것이다

부호화

def encode(payload)
    JWT.encode(payload, secret_key, 'HS256')
end

encode 방법에서, 우리는 유효한 하중을 전달한다.그런 다음 유효한 하중과 키를 인코딩하고 "HS256"알고리즘을 사용합니다.

디코딩

def decode(token)
   JWT.decode(token, "anything", true, {algorithm: 'HS256'})[0]
end

디코딩 방법으로 영패를 받다.이 키는 실제로 secret key 메서드가 아닌 문자열입니다.JWT.decode는 하나의 그룹을 되돌려줍니다. 이것이 바로 우리가 끝에 [0]가 있는 이유입니다.

로그인

로그인 및 토큰 인증 방법

노선게시물을 기록하고 요청을 받습니다.
사용자가 전방에서 로그인할 때, 우리는 사용자가 검사하고 있는 파라미터를 통해 사용자를 찾을 수 있습니다.
여기서 주의해야 할 것은 다음과 같은 몇 줄이다.

payload = {user_id: user.id}
token = encode(payload)

우리는 우리의 부하가 이 사용자에게 유일하기를 바란다.모든 사용자가 같은 id를 가지고 있지 않아야 하기 때문에 인코딩된 유효 부하가 유일하다는 것은 확실하다.
영패는 유효 부하를 인코딩한 결과이다.우리는 사용자 대상과 이 인코딩된 영패를 전방으로 보낼 것입니다.

토큰 인증

우리가 앞장섰을 때, 이런 작업 방식은 더욱 의미가 있을 것이다.그러나 본질적으로 사용자가 페이지를 새로 고칠 때, 그들은 보통 로그아웃한다.JWT를 사용하기 때문에 페이지를 다시 로드할 때 로그인을 유지할 수 있습니다.
로그인 방법에서, 우리는 영패를 앞쪽으로 보낼 것입니다.이 영패는 브라우저의 로컬 메모리에 저장됩니다.페이지를 새로 고칠 때, 전방에서 로컬 저장소에서 영패를 보내고, 저장된 영패에 따라 사용자를 찾으려고 시도합니다.

token = request.header["Authenticate"]
user = User.find(decode(token)["user_id"])

영패는 헤더를 통해 백엔드로 발송된다.(우리는 앞부분에서 이 점을 볼 것이다).그리고 우리는 디코딩 카드를 통해 사용자를 찾았다.

프런트엔드

사용자가 처음 로그인했을 때, 우리는 백엔드에 수령 요청을 보냈다.
백엔드의 로그인 방법을 돌이켜 보면 {token:token,user:user} 대상을 되돌려줍니다
따라서 응답을 받을 때, 우리는 받은 영패를 가져와 로컬 메모리에 저장해야 한다.이를 위해 우리는 다음과 같이 썼다.

localStorage.setItem("token", data.token)
// remember data is {token: token, user: user}

또한 사용자를 데이터로 설정합니다.사용자이 예시 코드에서 나는 반충을 사용했다.js.하지만 use State 갈고리, 이거.클래스 구성 요소의 상태 또는 Redux 스토리지에 기록됩니다.
사용자는 로그인하고 영패를 받아 로컬 메모리에 저장할 수 있다.만약 그들이 페이지를 새로 고친다면, 그들은 여전히 로그인해야 한다.이건 우리가 원하는 게 아니야!

인증 토큰

그래서 여기에useEffect 갈고리가 하나 있는데, 내 응용 프로그램의 구성 요소로 생명주기 방법을 설치한다.js 구성 요소.페이지가 새로 고쳐지면 로컬 저장소의 영패를 검사합니다.영패가 존재하면/login에 get 요청을 보냅니다.

get "/login", to: "users#token_authenticate"
#i put my method in the users controller.

이것은 get 요청입니다.get 요청을 통해 데이터를 백엔드에 어떻게 보냅니까?
만약 주의하신다면, 제목이 있는 가져오기 요청을 보냈습니다.

headers: {"Authenticate": localStorage.token}

뒤에 저희가 있어요.

token = request.headers["Authenticate"]

우리는 헤더를 통해 영패를 전달했다!예뻐요.
그래서 현재 백엔드는 디코딩된 영패에 따라 사용자를 찾아 이 사용자의 대상을 백엔드로 보냅니다.
페이지가 새로 고쳐져도 사용자는 기본적으로 로그인 상태를 유지합니다.그러나 이 점에서 만약 사용자가 로그아웃한다면 그는 여전히 로그인할 것이다.우리는 곧 도착한다.

취소

현재, 영패는 여전히 로컬 메모리에 저장되어 있다.우리가 해야 할 일은 사용자가 로그아웃할 때 영패를 지우는 것이다.

조건부 렌더링이 있는 라우트를 사용하고 있기 때문에 setUser ({}) 가 있습니다.사용자 객체가 비어 있으면 응용 프로그램이 로그인 페이지로 라우팅됩니다.

요약

그래서 방금 일어난 일의 흐름은,

로그인에 성공하면 백엔드에서 영패를 인코딩하여 사용자를 찾아 전방으로 보냅니다.

전면 토큰을 로컬 스토리지에 저장

페이지가 다시 로드되면 애플리케이션은 로컬 스토리지에 저장된 토큰을 확인하기 위해 백엔드에 요청을 보냅니다.인증을 거치면 사용자 대상을 전방으로 돌려보냅니다.

로그아웃하면 브라우저에서 로컬 스토리지 토큰이 지워집니다.