사용자가 vue js에 로그인한 후 인증 토큰을 저장하려면 어떻게 해야 합니까?

사용자가 vue js에 로그인한 후 인증 토큰을 저장하려면 어떻게 해야 합니까?

저는 프런트 엔드로 vue js를 사용하고 있으며, larabel로 빌드된 제 appi에서 사용자를 인증한 후 api 인증을 위한 모든 후속 요청과 함께 전송해야 하는 토큰을 받고 있습니다.

하지만 토큰을 브라우저에 안전하게 저장하는 방법은 무엇입니까?

당신의 질문은 매우 광범위합니다.그래서 저는 일반적인 대답을 할 것입니다.

사용하다localStorage토큰을 저장합니다.

localStorage.setItem('name','tokenValue'); // to store the token
localStorage.getItem('name'); // to getthe token value

간단한 웹 검색으로 localStorage에 대해 알 수 있습니다.이게 도움이 됐으면 좋겠다.

여기서 발견한 답변은 localStorage가 동기화되어 있지 않기 때문에 매우 비효율적입니다.로그인 후 단일 페이지 앱을 새로 고치려면 페이지 전체를 새로 고쳐야 합니다.이 UX는 vue를 사용하여 작성한 것으로 생각됩니다.

local Forage는 assync local Storage에 지나지 않습니다.이는 약속 기반이며 구문은 local Storage와 매우 유사합니다.

예:

localforage.getItem('something', myCallback);

자세한 내용은 문서를 참조하십시오.

또한 백엔드에 대한 모든 요청에서 토큰을 전송하려면vue.http.interceptors.

예:

Vue.http.interceptors.push((request, next)  => {
  request.headers['Authorization'] = auth.getAuthHeader()
    next((response) => {
      if(response.status == 401 ) {
        auth.logout();
        router.go('/login?unauthorized=1');
      }
   });
});

언급URL : https://stackoverflow.com/questions/47250563/how-do-i-store-auth-token-after-user-login-in-vue-js