백엔드는 프런트엔드에만 인터페이스를 제공하며, 각 인터페이스에는 로그인이 필요한 페이지가 있습니다. 前端如何拦截。比如:由A页面 通过A标签跳转到 B页面(B页面需要登录才能进去)。我现在做法是进到B页面，发送ajax请求백엔드는 점프하기 전에 상태를 반환합니다. 지금 문제는 B를 입력했다는 겁니다. 페이지만으로 판단하는 것은 무리입니다.
이 문제를 해결하는 방법은 두 가지가 있습니다. 1. 로그인이 필요한 페이지이므로 페이지 B에서 보낸 ajax 요청에 필연적으로 토큰이 포함되어 있으므로 서버에서 확인을 수행합니다. 백엔드는 권한이 있는지 확인하기 위해 토큰 만료 확인을 수행합니다. 오류가 보고되면 프런트 엔드로 돌아가서 권한 없이 오류 메시지를 확인할 수 있는 공개 메서드를 작성합니다. (이 메서드는 응답 인터페이스에서 더 안전해야 합니다.) 2. 프런트 엔드는 저장된 사용자 정보의 만료를 확인하기 위해 각 페이지에 watchdog js를 작성합니다.
포스터의 요청은 클릭시 점프 여부를 결정하는 것이라고 생각합니다. a 태그를 클릭 기능으로 변경하고 window.location.href = url을 사용하여 페이지로 이동하는 기능에서 판단할 수 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
태그를 클릭할 때 먼저 Ajax 요청을 보낸 다음 어디로 이동할지 결정할 수 있나요?
Ajax 요청을 직접 캡슐화하고, 로그인 상태를 별도로 판단하고, 로그인하지 않은 경우 로그인으로 점프하고, 로그인 후 바로 데이터를 반환할 수 있습니다
공개 js를 작성하고, 페이지 로딩 기능을 작성하고, 로그인 인증이 필요한 페이지를 참조하여 접속한 후 논리적 판단을 작성하세요
프런트엔드에서는 가로채지 않고 서버에서는 가로채기를 합니다. 프런트엔드 차단의 경우 B페이지에서만 가능합니다. 입력할 URL의 철자를 고려하셨나요? B 페이지 접속 인터페이스는 사용자 정보를 얻으려고 시도하는데, 얻으면 로그인되고, 얻지 못하면 로그인되지 않습니다.
토큰에는 일반적으로 만료 시간이 있습니다. 페이지가 점프하면 먼저 토큰
이 만료되었는지 확인하세요. 만료되지 않으면 계속 진행하세요.
단일 페이지 애플리케이션이라면 해결하기 쉽습니다. 단일 페이지 애플리케이션이 아니라면 공개 js로 작성하세요.
사용자는 일부 대화형 작업으로 인해 반드시 두 번째 페이지로 이동하게 됩니다. 로그인하지 않은 경우 로그인(또는 등록)하라는 메시지가 표시됩니다. 캡슐화됨 로그인 후 성공 콜백, 등록 성공 후 콜백을 예약한 다음 콜백 함수에서 B 페이지로 이동합니다
이 문제를 해결하는 방법은 두 가지가 있습니다.
1. 로그인이 필요한 페이지이므로 페이지 B에서 보낸 ajax 요청에 필연적으로 토큰이 포함되어 있으므로 서버에서 확인을 수행합니다. 백엔드는 권한이 있는지 확인하기 위해 토큰 만료 확인을 수행합니다. 오류가 보고되면 프런트 엔드로 돌아가서 권한 없이 오류 메시지를 확인할 수 있는 공개 메서드를 작성합니다. (이 메서드는 응답 인터페이스에서 더 안전해야 합니다.)
2. 프런트 엔드는 저장된 사용자 정보의 만료를 확인하기 위해 각 페이지에 watchdog js를 작성합니다.
포스터의 요청은 클릭시 점프 여부를 결정하는 것이라고 생각합니다. a 태그를 클릭 기능으로 변경하고 window.location.href = url을 사용하여 페이지로 이동하는 기능에서 판단할 수 있습니다.
lz 프론트엔드 프레임워크는 어떤 용도로 사용되나요?
vue_router에 구현할 수 있는 Hook 함수가 있는 것으로 알고 있습니다. router.beforeEach에서 로그인 여부를 판단합니다. 그렇지 않은 경우 로그인합니다. , 바로 다음()