laravel - Vue 프런트엔드 단일 페이지 프로젝트를 위한 사용자 인증 아이디어

Question

환경:

• 백엔드: Laravel + Passport

• 프런트엔드: Vue 2.0 + Vuex + Vue-router

질문:

프런트엔드에서 로그인 후 access_token,保存在localStorage中，那么用户退出登录的话需要怎么操作？清空localStorage를 받을 수 있나요? 백엔드에 또 다른 요청을 보내야 하나요?

사용자가 로그아웃을 클릭하지 않고 직접 브라우저나 창을 닫는 경우, 다음 방문 시에도 localStorage里的access_token 그대로 남아 있을 경우 보안이 별로 좋지 않죠?

My access_token 유효기간은 1년이므로 로그인할 때마다 새로 생성됩니다. 이 문제를 해결하려면 어떻게 해야 하나요?

프런트엔드 사용자 인증을 처리하는 방법에 대한 아이디어를 주세요...정말 감사합니다! ! !

Answer 1

JWT 검증을 하다가 axios와 라우터를 이용해 검증을 하게 됐는데 아직 완료되지 않아서 참고용으로 코드를 올려보겠습니다

축 부분

으아악

라우터 부분:

으아악

Answer 2

종료할 때 localStorage에서 access_token을 삭제하세요.
Vuex용 플러그인을 작성하고 커밋 변형할 때마다 access_token의 새로 고침 시간을 업데이트할 수 있습니다.
다음 로그인 시 새로고침 시간을 확인하세요. 5분 전이면 로그인 정보가 만료된 것으로 간주됩니다. localStorage中的access_token。
可以给Vuex写个插件，每次commit mutation时，更新一下access_token的刷新时间。
下次登录时，判断这个刷新时间，5分钟前了，就认为登录信息过期了。

如果不想把access_token放到localStorage中，可以放在Vuex中，每次都需要重新登录。
重新登录时，你可以没必要都重新生成access_token

localStorage에 access_token을 넣지 않으려면 Vuex에 넣을 수 있으며, 매번 다시 로그인해야 합니다.
다시 로그인할 때 access_token을 다시 생성할 필요가 없습니다. 🎜

Answer 3

프로젝트를 요약해봤습니다. 환영합니다 스타~
[vue+axios] 프론트엔드에서 로그인 차단을 구현하는 방법을 배우는 프로젝트

Answer 4

인증 정보는 백그라운드에 따라 로그인 여부에 따라 요청을 보낸 후, API에서 반환된 결과를 바탕으로 인증 정보가 기억나지 않는 경우 프런트엔드를 운영해야 합니다. sessionStorage를 사용하는 것이 더 좋습니다

Answer 5

라우팅 인터셉터를 설정하고, 로그인과 로그아웃을 제외한 모든 페이지를 인터셉트하고, 로컬 변수 사용자가 존재하는지 확인하고, 존재한다면 마지막 검증 시간을 판단하고, 1분을 초과하면 다시 검증합니다.

으아아아