jwt 인증을 사용하여 vue 응용 프로그램에 자동 로그인

jwt 인증을 사용하여 vue 응용 프로그램에 자동 로그인

jwt 토큰을 사용하여 작업을 승인하고 백엔드에서 보호된 리소스를 요청합니다.

프런트 엔드:Vue, Vue 라우터, VueX, Vuetify

백엔드: Express, jwt 토큰, cookieParser

로그인 루트를 정상적으로 호출하면토큰 및 사용자 데이터(사용자 이름, 이메일, userId)가 프런트엔드로 반환됩니다.또한 httpOnly cookie(새로고침 포함)를 반송합니다.토큰) 및 새로고침 삽입데이터베이스 반대편에 토큰이 있습니다.vuex 스토어를 통해 트리거합니다.state.loggedIn로.true를 할당합니다.user에 반대하다.state.user. 같은 기능으로,userlocalStorage에 대해 이의를 제기합니다.

새 탭을 다시 열거나 창을 닫은 후 사용자가 자동으로 로그인해야 하는지 여부를 확인하려면localStorage의 데이터를 읽고 처음에 vueX 스토어를 시작합니다.loggedIn그리고.user.

// read out localStorage for the user
const user = JSON.parse(localStorage.getItem('user'));

const initialState = user
    ? { user, loggedIn: true, accessToken: null }
    : { user: null, loggedIn: false, accessToken: null };

보호된 루트가 호출되기 전에beforeEachvue 라우터 개체의 메서드를 사용하여 vueX getter가 있는지 확인합니다.auth/getUser사용자 개체를 반환합니다.그렇지 않으면 vue 라우터는 로그인 페이지로 리다이렉트되므로 사용자는 다시 자신을 인가할 수 있습니다.

const routes = [
  { path: '/login', name: 'Login', component: Login, meta: { authRequired: false }},
  { path: '/home', name: 'Home', component: Home, meta: { authRequired: true }}
]

const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes });

router.beforeEach(async (to, from, next) => {
  if (to.meta.authRequired) {
    let user = VuexStore.getters['auth/getUser'];
    if (!user) {
      next({ path: '/login'});
    }
  }
  next();
});

그러나 localStorage의 사용자 객체가 유효하며 단순히 다음과 같이 설정되는 것이 아님을 누가 보증합니까?true이렇게 해야 합니까, 아니면 수신한 액세스 권한을 사용해야 합니까?토큰 또는 새로 고침 쿠키자동 로그인 프로세스를 위해 토큰을 사용할 수 있습니까?고마워요.

그래, 거의 다 왔어새로 고침 토큰을 찾고 있습니다.

https://hasura.io/blog/best-practices-of-using-jwt-with-graphql/ #http_http_http://https://hasura.io/blog/best-practices-of-using-jwt-with-graphql/ https://auth0.com/blog/refresh-tokens-what-are-they-and-when-to-use-them/

기본적으로 현재 토큰이 만료되면 localStorage에서 추적해야 합니다.그런 다음 백그라운드에서 토큰을 자동으로 새로 고칩니다.따라서 사용자는 자동으로 로그아웃되지 않습니다.

추가하도록 편집됨:

그러나 localStorage의 사용자 개체가 true로 설정되지 않고 유효하다는 것을 누가 보증합니까?이렇게 해야 합니까, 아니면 수신된 액세스 권한을 사용해야 합니까?토큰 또는 새로 고침 쿠키자동 로그인 프로세스를 위해 토큰을 사용할 수 있습니까?고마워요.

API가 이를 보증합니다.사용자가 비활성 액세스 토큰을 사용하여 API와 대화하려고 하면 API가 오류를 발생시킵니다.작동이 안될 거에요.따라서 사용자가 클라이언트 측 데이터를 조작하기 시작해도 상관 없습니다.서버측에서는 절대 신뢰하지 않는다;-)

언급URL : https://stackoverflow.com/questions/69346852/auto-login-on-vue-application-with-jwt-authentication