JWT를 저장하고 react를 사용하여 모든 요청과 함께 전송하려면 어떻게 해야 합니까?

JWT를 저장하고 react를 사용하여 모든 요청과 함께 전송하려면 어떻게 해야 합니까?

기본적인 등록/인증 시스템이 가동되고 있기 때문에 잘 알 수 있습니다.

그래서 난 이걸 얻었어:

app.post('/login', function(req,res) {
 Users.findOne({
email: req.body.email
}, function(err, user) {
if(err) throw err;

if(!user) {
  res.send({success: false, message: 'Authentication Failed, User not found.'});
} else {
  //Check passwords
  checkingPassword(req.body.password, user.password, function(err, isMatch) {
    if(isMatch && !err) {
      //Create token
      var token = jwt.sign(user,db.secret, {
        expiresIn: 1008000
      });
      res.json({success: true, jwtToken: "JWT "+token});
    } else {
      res.json({success: false, message: 'Authentication failed, wrong password buddy'});

       }
     });
    }
 });
});

그 후 /admin 루트를 확보하여 헤더에 jwt가 있는 get 요구를 송신할 때마다 POSTMAN을 사용하여 모든 것이 정상적으로 동작합니다.

여기서 어려운 부분이 있습니다.기본적으로 로그인 할 때 이것이 성공하면 admin 페이지로 리다이렉트 합니다.관리/* 루트에 액세스하려고 할 때마다 서버에 jwToken을 송신하고 싶은데 문제는 어떻게 하면 이 작업을 수행할 수 있는가 하는 것입니다.리덕스/플럭스는 사용하지 않고 리액트/리액트 라우터만 사용하고 있습니다.

나는 정비사가 어떻게 작동하는지 모른다.

여러분 감사합니다.

토큰을 localStorage에 저장하지 마십시오. xss 공격을 사용하여 토큰이 손상될 수 있습니다.로그인 시 클라이언트에 액세스토큰과 리프레시토큰을 모두 제공하는 것이 최선의 해결책이라고 생각합니다.액세스 토큰을 메모리에 저장하고(예를 들어 redux 상태), 리프레시 토큰을 서버에 httpOnly 플래그(가능한 경우 시큐어 플래그)로 작성해야 합니다.액세스 토큰은 2~3분마다 기한이 만료되도록 설정해야 합니다.사용자가 2~3분마다 자격 정보를 입력할 필요가 없도록 하기 위해 다음 명령을 호출하는 간격이 있습니다./refreshToken현재 토큰이 만료되기 전의 엔드포인트(리프레시 토큰 제외).

이렇게 하면 xss/sysf를 사용하여 접근토큰을 침해할 수 없지만, xss 공격을 사용하여 공격자는 사용자 대신 콜을 발신할 수 있습니다./refreshToken단, 반환된 토큰을 손상시킬 수 없기 때문에 유해하지는 않습니다.

1-로그인 컴포넌트가 API 서버 엔드포인트로 로그인 요청을 전송합니다.

2-server API 엔드포인트가 토큰을 반환합니다.

3- 토큰을 사용자의 local Storage에 저장합니다.

4 - 앞으로 모든 API 호출이 헤더에 포함됩니다.

예: https://github.com/joshgeller/react-redux-jwt-auth-example

보안 업데이트:코멘트에서 @Dan이 언급했듯이 토큰은 로컬 스토리지에 저장해서는 안 됩니다.이는 모든 Javascript 스크립트가 해당 스크립트에 액세스할 수 있기 때문입니다.즉, 소유하지 않은 서드파티 스크립트는 토큰에 액세스하여 원하는 대로 토큰을 사용할 수 있다는 것을 의미합니다.

HttpOnly 플래그를 사용하여 Cookie로 저장하는 것이 좋습니다.

localStorage에 JWT를 저장하는 것은 XSS 공격에 취약하기 때문에 다른 방법으로 httpOnly 쿠키에 저장할 수 있지만 프런트엔드로 저장할 수 없는 것은 유감입니다.이 게시물을 확인해 주십시오.

유일한 옵션은 서버 측에서 httpOnly cookie 내의 JWT를 반환하고 httpOnly cookie 내의 토큰을 받아들이도록 설정하는 것입니다.토큰 유효기간을 어떻게 처리할 것인지도 생각해야 합니다.

메모: 최신 브라우저는 httpOnly cookie를 통한 읽기/쓰기를 지원 및 금지하고 있지만 오래된 브라우저는 잘 모르겠습니다.

언급URL : https://stackoverflow.com/questions/39176237/how-do-i-store-jwt-and-send-them-with-every-request-using-react