로컬 스토리지 항목 내가 JWT 토큰 인증 시스템을 사용하고

Question

Axios의 헤더에 업데이트되지, 내가 로그인 할 때 토큰과 같이 얻을 :

이

axios.post('/login', data) 
    .then(response => { 
     localStorage.setItem('token', response.data.token); 
    }); 

이 잘 작동하고 토큰이 로컬 스토리지에 저장됩니다. 그러나 토큰은 이후 요청에 포함되지 않습니다. 승인 헤더는 Bearer null입니다.

이것은 전역 axios 객체를 설정하는 방법입니다. 내가 사이트를 새로 고치면

window.axios = axios.create({ 
    baseURL: '/api/', 
    timeout: 10000, 
    headers: { 
     'X-Requested-With': 'XMLHttpRequest', 
     'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content, 
     'Authorization': 'Bearer ' + localStorage.getItem('token') 
    } 
}); 

의 토큰가 설정되고, 적절하게 사용된다.

편집 : 나는 create() 방법에서 Authorization 헤더를 제거하고 대신 window.axios.defaults.headers.common['Authorization']를 사용하여 작동하도록있어

. 그러나 이제 같은 문제가 에 표시됩니다. Laravel Echo. 에코을

window.setAuthToken = (token) => { 
    window.axios.defaults.headers.Authorization = 'Bearer ' + token; 
    window.Echo.options.auth.headers.Authorization = 'Bearer ' + token; 
    localStorage.setItem('token', token); 
} 

Axios의 헤더는 성공적으로 업데이트되어 있지만 :

window.Echo = new Echo({ 
    broadcaster: 'pusher', 
    key: 'xxx', 
    cluster: 'eu', 
    encrypted: true, 
    namespace: 'xxx', 
    auth: { 
     headers: { 
      'Authorization': 'Bearer ' + localStorage.getItem('token') 
     } 
    } 
}); 

을 그리고 헤더과 같이 업데이트 :이 같은 인스턴스를 만듭니다.

Answer 1

문제는 귀하가 페이지로드시 localStorage.getItem('token')을 사용하고 있다는 것입니다. localStorage으로 설정하면 axios 헤더에서 업데이트해야합니다.

window.axios = axios.create({ 
    baseURL: '/api/', 
    timeout: 10000, 
    headers: { 
     'X-Requested-With': 'XMLHttpRequest', 
     'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content, 
     'Authorization': 'Bearer ' + localStorage.getItem('token') 
    } 
}); 

axios.post('/login', data) 
    .then(response => { 
     localStorage.setItem('token', response.data.token); 
     window.axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token'); 
    });