JWT 토큰은 어디에 보관해야 하나요?

JWT 토큰은 어디에 보관해야 하나요?

JWT 토큰을 사용하여 JSON API 서버를 인증하는 vue.js와 vuex를 사용하여 앱을 개발 중입니다.그래서 JWT 토큰을 저장하는 베스트 프랙티스가 궁금합니다.

vuex 스토어에 저장하면 페이지 리프레시 후 유실되기 때문에 사용자가 다시 로그인해야 하기 때문에 그다지 편리하지 않습니다.

브라우저의 로컬 스토리지에 저장하면 다음 로그인 전에 사용되지 않게 되고 인증 토큰을 가정하는 컴포넌트가 혼동됩니다.어떻게 대처해야 할지 모르겠어요.

이에 대한 힌트를 주셔서 감사합니다.

아래는 Axios 라이브러리를 사용한 리액트 프로젝트의 스냅샷입니다.그때도 같은 문제가 있었습니다.서버로부터의 응답이 401(Unauthenticated)일 때 다른 토큰을 사용하여 새로운 JWT 토큰을 요청했습니다(새로고침).토큰) 유효기간 없음

axios.interceptors.response.use(
    ok => ok,
    err => {
        if(err.response.status === 401) {
            return axios
                    .get('/api/oauth/token/refresh', {
                        headers: {'Authorization': `Bearer ${localStorage.getItem('refreshToken') }`}
                    })
                    .then(({data}) => {
                        // in data is new access token
                        err.config.headers['Authorization']=`Bearer ${data.token}`;
                        return axios(err.config)
                    });

        } 

        throw err
    }
);

브라우저의 로컬 스토리지에 저장하면 다음 로그인 전에 사용되지 않게 되고 인증 토큰을 가정하는 컴포넌트가 혼동됩니다.어떻게 대처해야 할지 모르겠어요.

그렇지 않습니다. localStorage 정보는 문서 원본별로 저장됩니다.토큰이 아직 사용 가능한지(만료되지 않은 경우) 확인하고 로그인 페이지로 리디렉션하는 것이 응용 프로그램의 책임입니다.

유효기간을 재로그인하는 것이 합리적인 기간까지 연장하고 JWT 토큰을 연장하는 적절한 알고리즘을 생각해야 합니다.예를 들어 사용자가 서버에 요청을 할 때마다 1시간을 늘릴 수 있습니다.

언급URL : https://stackoverflow.com/questions/53442693/where-should-i-store-jwt-token