javascript - 프론트엔드와 백엔드 분리 후 비밀번호, 자동 로그인, 로그인 후 페이지를 기억하고 있는데, 로그인 시간이 초과되면 어떻게 해야 하나요?

Question

제목 그대로

1. 비밀번호는 로컬 저장소에 기록되어 있나요? 매우 안전하지 않습니다

2. 그리고 로그인 후 토큰을 받으세요. 매일 밤 잠을 자려면 토큰이 필요하므로 토큰은 로컬 저장소에 기록되어야 합니다.
   그렇지 않으면 페이지를 새로 고칠 때 토큰이 없습니다.

3. 하지만 문제는 또 발생합니다. 토큰이 만료되면 서버로 가서 토큰이 만료되었는지 확인한 후 만료되면 로그인으로 이동하세요. . . 이 과정이 이별이 없는 것보다 더 귀찮게 느껴진다. . .

Answer 1

우선, 절대적으로 안전한 프런트엔드는 없다는 점을 분명히 해야 합니다. 가장 중요한 것은 프런트엔드와 프런트엔드 모두 토큰을 확인해야 한다는 것입니다.
일반적으로 프런트엔드 스토어는 다음과 같습니다. 토큰 또는 백엔드는 고객 서비스 측에 쿠키를 씁니다.
요청 인터페이스 이때는 자동 쿠키이거나 수동으로 백엔드에 전달됩니다.
백엔드의 피드백을 기반으로 토큰이 만료되었는지 확인하세요. 해당 챌린지는 로그인 페이지로 이동합니다.

Answer 2

1: 브라우저가 비밀번호를 기억하더라도 브라우저 데이터에 기록되며, 비밀번호를 기억하는 기능은 기기가 아닌 이상 로컬에서 볼 수도 있습니다. 다른 사람이 가져가면 다른 사람도 비밀번호를 알 수 없습니다
2: 우리 토큰은 localStorage에도 기록됩니다
3: 네, 그래서 프런트엔드 아키텍처 설계가 매우 중요합니다

Answer 3

로컬 저장소의 비밀번호를 기억하거나, 비밀번호를 기억하지 말고 브라우저가 알아서 하게 하세요

토큰은 일반적으로 쿠키에 저장됩니다. 웹페이지에서 인증할 때 로그인 가능 여부는 페이지에 아바타가 표시되는지 여부 등으로 직접 판단할 수 있습니다. 토큰이 만료되었는지 여부를 판단할 필요가 없습니다. 서버 API를 호출하면 서버는 토큰을 기반으로 실제로 로그인했는지 여부를 확인합니다.