Bagaimana untuk mendapatkan token Pembawa secara automatik kepada pengepala axios dalam paparan menggunakan vue dan laravel

Question

Saya cuba mendapatkan token pengguna semasa untuk mendapatkan semula data seperti ini:

async getUser() {
    const config = {
                headers: {
                    'Accept': 'application/json',
                    'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJ...'
                }
            }
  await this.axios
    .get("/api/auth/testapi", config)
    .then((response) => {
      this.user = response.data;
    })
    .catch((error) => {
      console.log(error);
      this.user = [];
    });
},

Bagaimana untuk menetapkan pengepala "Kebenaran" untuk mendapatkan token semasa pengguna yang disahkan secara automatik?

Saya mencuba storan tempatan seperti ini:

async getUser() {
    const token = localStorage.getItem('access_token');
    const config = {
                headers: {
                    'Accept': 'application/json',
                    'Authorization': `Bearer ${token}`
                }
            }
  await this.axios
    .get("/api/auth/testapi", config)
    .then((response) => {
      this.user = response.data;
    })
    .catch((error) => {
      console.log(error);
      this.user = [];
    });
},

Tetapi kesannya tidak bagus.

Apa masalahnya?

---

Kemas kini:

app.js:

require("./src/main.js");
import VueAxios from "vue-axios";
import axios from "axios";
Vue.use(VueAxios, axios);


if (localStorage.has("access_token")) {
axios.defaults.headers.common["Authorization"] =
"Bearer " + localStorage.getItem("access_token");
}

loginSuccess(accessToken) {
localStorage.setItem('access_token', accessToken);
window.location.href = '/home';
}

Masalah berlaku selepas tamat "jika"

';' expected.

Answer 1

Apa yang akan saya lakukan,

Pada setiap permintaan, pada fail js (bukan vue), cth. fail bootstrap.js (kerana ia akan dimuatkan dengan lebih cepat):

let access_token = localStorage.getItem('access_token');
if(access_token) {
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + access_token;
}

Pada fungsi log masuk anda, apabila anda log masuk pengguna dan mendapatkan semula token akses:

loginSuccess(accessToken) {
    localStorage.setItem('access_token', accessToken);
    window.location.href = '/home';
}

Ia akan mengubah hala pengguna ke halaman utama anda atau mana-mana halaman yang pengguna perlu diubah hala, dan access_token akan ditetapkan pada localStorage.

Bit terakhir yang tinggal ialah untuk mengalih keluar item localStorage access_token apabila pengguna log keluar dan mungkin menangkap 401 menggunakan pemintas untuk mengalih keluar access_token dan ubah hala ke /login apabila token tamat tempoh.

window.axios.interceptors.response.use(function (response) {
    return response;
}, function (error) {
    if (401 === error.response.status) {
        localStorage.removeItem('access_token');
        window.location.href = '/login'
    } else {
        return Promise.reject(error);
    }
});

Jika anda bercadang untuk membuat permintaan axios kepada titik akhir luaran yang bukan milik anda, anda mungkin mahu menyemak domain 401 untuk memastikan ia adalah domain anda