angular.js - 前后端分离的单页应用如何来判断当前用户的登录状态？

Question

有个单页应用的url例如http://cctv.com/!#/car/list,只有在登录的情况下，我才可以去访问这个url，如果不是登录状态，则要跳到登录页面。

以前的话，请求url到后台，后台会判断下当前用户是否登录，但是现在做成单页应用了，也不需要请求到后台了，那么在单页应用的情况下如何来处理用户是否已经登录了的状态呢？

Answer 1

으아아아 으아아아 으아아아

url 변경 사항을 듣고, 로그인되지 않은 경우 로그인 상태를 확인하여 로그아웃하세요.
로그인 상태 확인하기url 变化，如果不是login logout 就检查登录状态。
检查登录状态

1. 检查js变量，没有登录就直接跳登录页

2. 如果js变量已经登录，就判断一下是否需要异步检测 不需要检测就结束(比如上次检测是在60秒内)。

3. 如果需要异步检测，就异步检测是否登录，如果成功 刷新一下lastcheck

js 변수를 확인하고 로그인 없이 로그인 페이지로 바로 이동
js 변수가 로그인된 경우 비동기 감지가 필요한지 확인하고 감지가 필요하지 않으면 종료합니다(예: 마지막 감지가 60초 이내임).

🎜 🎜🎜비동기 감지가 필요한 경우 비동기 로그인 여부를 확인하세요. 성공하면 마지막 확인 시간을 새로고침하세요. 🎜🎜 🎜🎜로그인되지 않은 것으로 확인되면 로그인 페이지로 바로 이동하세요🎜🎜 🎜

Answer 2

로그인 후 백엔드 API는 토큰을 제공하고 프런트엔드는 토큰을 저장하며 로그인이 필요한 액세스 시 토큰을 전달합니다. 프런트 엔드 라우팅에서는 토큰이 있는지 확인하고, 없으면 로그인합니다. 또한 프런트엔드에는 비동기식 대화형 API에 대한 오류 처리 기능이 있습니다. 예를 들어 백엔드 오류 코드는 토큰이 만료되었음을 나타냅니다.

Answer 3

현재 일반적인 관행은 프런트엔드가 API를 통해 백엔드에 사용자 이름과 비밀번호를 보내는 것입니다. 로그인 상태를 유지할지 여부는 백엔드가 쿠키를 설정하며 프런트엔드는 아무것도 할 필요가 없습니다.

Answer 4

localStorange를 통한 스토리지 로그인 상태인데 보안이 전혀 되어 있지 않습니다

Answer 5

로그인 상태는 백엔드에 의해 쿠키에 저장됩니다. 그것에 대해 생각할 필요가 없습니다.

Answer 6

배경이 쿠키를 설정하도록 하세요.

백그라운드에서 쿠키를 설정한 후 프런트 엔드에서 요청하면 자동으로 헤더를 가져옵니다.

그런 다음 요청이 특정 상태 코드를 반환하면 로그인 페이지로 이동합니다.

Answer 7

어떤 상황이더라도 프런트 엔드에서는 사용자가 누구인지, 사용자가 로그인했는지 여부를 알 수 없습니다. 그럼 누가 알겠어요? 뒷끝!

그러므로 백엔드에서 매번 제공하는 로그인 상태 정보만 제공하고 백엔드에서 이를 확인하도록 하면 됩니다.

1. 쿠키에 저장했다가 요청할 때마다 전송할 수 있습니다. 물론 이는 귀하에게 투명할 수 있으며 백엔드 공장 쿠키를 허용하고 http로만 설정하도록 할 수 있습니다.

2. 단일 페이지이므로 메모리의 전역 변수에 저장될 수도 있습니다. 그렇지 않으면 로그인되지 않습니다.

3. 토큰을 직접 캐시하고 요청을 보낼 때마다 수동으로 가져올 수 있습니다.

Answer 8

백엔드가 어떻게 지원하는지에 따라 토큰과 쿠키 방법이 모두 허용됩니다.

Answer 9

loopback+vue+vue-resource, 프런트엔드 및 백엔드 분리 템플릿, Vue 페이지 페이징 기능, 권한 제어 인증, 액세스 토큰 메커니즘, 자격 증명, CI, docker

https://github.com/qxl1231/ge...

전체 솔루션 세트를 알아보려면 내 프로젝트 예를 살펴보세요.