vue 및 laravel을 사용하여 Bearer 토큰을 Axios 헤더에 자동으로 가져오는 방법

Question

다음과 같은 데이터를 검색하기 위해 현재 사용자의 토큰을 얻으려고 합니다.

으아악

인증된 사용자의 현재 토큰을 자동으로 가져오도록 "Authorization" 헤더를 설정하는 방법은 무엇입니까?

다음과 같이 로컬 저장소를 사용해 보았습니다.

으아악

근데 효과가 좋지 않아요.

무엇이 문제인가요?

---

업데이트:

app.js:

으아악

if가 끝난 후 문제 발생

으아악

Answer 1

어떡하지,

모든 요청 시 js 파일(vue 아님), 예: bootstrap.js 파일(로드 속도가 더 빠르기 때문):

으아악

로그인 기능에서 사용자로 로그인하고 액세스 토큰을 검색할 때:

으아악

사용자를 홈페이지 또는 사용자가 리디렉션되어야 하는 페이지로 리디렉션하고 access_token은 localStorage에 설정됩니다.

마지막 남은 부분은 사용자가 로그아웃할 때 localStorage access_token 항목을 제거하고 인터셉터를 사용하여 401을 포착하여 access_token을 제거하고 토큰이 만료되면 /login으로 리디렉션하는 것입니다.

으아악

본인이 소유하지 않은 외부 엔드포인트에 axios 요청을 할 계획이라면 401의 도메인을 확인하여 귀하의 도메인인지 확인하는 것이 좋습니다