JWT 토큰 유효성 검사 - beforeEnter

JWT 토큰 유효성 검사 - beforeEnter

Vue 라우터에서 'beforeEnter'를 실행하여 사용자가 인증되었는지 확인하고 그렇지 않으면 메시지를 트리거하는 기능이 있습니다.

(jwt)가 있는지 확인합니다.token에 저장됩니다.localStorage- 사용자가 수동으로 로그아웃하면 토큰이 삭제되기 때문에localStorage. 단, 토큰이 만료되어도 토큰은 그대로localStorage그 때문에, 함수는 생각한다)(localStorage.token)) 사용자가 로그인하고 있습니다.

토큰이 비활성화되어도 서버는 요청을 차단합니다.또한 안전합니다.

페이지가 로드되기 전에 서버 측에서 'beforeEnter' 미들웨어에서 토큰의 유효성을 확인하려면 어떻게 해야 합니까?

토큰의 유효성을 검사하고 결과를 반환하는 엔드포인트를 만들어야 합니까? (fetch()를 사용하고 있지만, 사람들이 악시오 가로채기를 사용하는 것을 본 적이 있습니다...)

제가 VUEX를 사용하지 않는 것은 가치가 없습니다.그것에 대한 자세한 내용이 있는 것 같습니까?

function protectedPage(to, from, next) {
  if (localStorage.token) {
    next();
  } else {
    Vue.toasted.show("The session has ended. Please login.", {
      theme: "toasted-primary",
      position: "top-center",
      duration: null,
      action: {
        text: "Login",
        onClick: (e, toastObject) => {
          next("/");
          toastObject.goAway(0);
        }
      }
    });
    next("/");
  }
}

부터exppayload의 일부이고 JWT는 base64 문자열일 뿐이므로 디코딩만 하면 됩니다.expVue 앱에 접속합니다.

JWT 토큰을 디코딩하여 payload를 취득하는 기능입니다(여기서 취득).

function parseJwt (token) {
    var base64Url = token.split('.')[1];
    var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    var jsonPayload = decodeURIComponent(Buffer.from(base64, "base64").toString("ascii").split("").map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
};

확인해보도록 하겠습니다.beforeRouteEnter기능:

beforeRouteEnter (to, from, next) {
  if (localStorage.token) {
    const jwtPayload = parseJwt(localStorage.token);
    if (jwtPayload.exp < Date.now()/1000) {
        // token expired
        deleteTokenFromLocalStorage();
        next("/");
    }
    next();
  } else {
    next("/");
  }
},

JWT 토큰 payload를 디코딩하여 클라이언트 측에서 체크인하는 것으로 보안 문제가 발생하지 않으므로 백엔드 서버에서 확인할 필요가 없습니다.또, 유저가 루트에 액세스 할 때마다, HTTP 요구를 1개 절약할 수 있습니다.

각 API 호출에 바인드하여 사용자 세션을 검증하는 백엔드 미들웨어가 필요합니다(아직 존재하고 토큰이 같은 경우).

세션이 만료되었거나 토큰이 변경되어 현재 사용자 세션과 일치하지 않는 경우 백엔드에서 로그인 페이지로 사용자를 리디렉션하여 강제로 새 세션을 만들 수 있습니다.

루트 입구마다 인증을 받을 필요는 없고 백엔드 API 호출을 차단하고 메시지를 반환하거나 로그인 페이지로 리다이렉트하기만 하면 된다고 생각합니다.사용자는 만료된 세션 정보가 있는 페이지를 계속 찾아볼 수 있지만 가져오기 또는 양식 작업을 수행할 수 없습니다.

언급URL : https://stackoverflow.com/questions/62676529/checking-the-validity-of-jwt-tokens-beforeenter