2020년 1월 3일 - react수업

jwt 란?

json web token

 

안정적이다 - 데이터의 기밀성 보장하거나 데이터의 무결성을 보장 

 - 데이터 자체를 노출시키지 않는 것(=암호화)

 - jwt는 데이터의 위변조 여부만 판단한다. (토큰값만 복사해서 jwt에 decode작업을하면 그냥 다 보임 json값으로 -> 결국 기밀성을 보장하겠는 것이 아님)

 

jwt의 메소드들

jwt.sign : 백엔드에서 많이 쓰임, jwt를 생성하기 위해서, 프론트와 백이 협업해야한다(key값을 서로 알아야함, 어떠한 key값을 쓸것인지. (key값이 유출되면 안된다 -> 누가 세션을 만들어내서 로그인을 해버릴 수 있음)

jwt.verify : sign당시에 key값을 2번째 파라미터로 받아서 ...

jwt.decode : key값 없이 데이터의 원본을 확인할때 사용

 

jwt안에 들어가는 데이터들은 누구나 데이터를 볼수있으므로, 암호화를 하는것이 문제가 아니라 무결성, 즉 위변조를 판별하는것이 목적.

 

https에서 post로 보내는 데이터들은 모두 암호화되어있고, 해당 서버에서만 복호화키를 가지고 있다. 

 

const jwt = require('jsonwebtoken');
const token = jwt.sign({ name: 'react' }, 'asdfghjk');
try {
  let decoded = jwt.verify(token, 'asdfghjk');  // 프론트엔드에서는 거의 verify만 사용한다.
  console.log(decoded);
} catch (err) {
  console.log(err);
}

 

process.env.React_APP_사용할 변수

 

Route 컴포넌트는 내장메소드로 render를 가지고 있어서, 3항 연산자를 사용하여 컴포넌트틀 분기해서 랜더링할 수 있음 -> 예를들어 로그인되어있으면 사용자페이지(컴포넌트)로 이동 로그인이 되어있지않으면, 로그인하는 페이지로 이동 이런식으로.