vue+axios 攔截器實現統一token
阿新 • • 發佈:2018-12-21
需求
要想統一處理所有http請求和響應,就得用上 axios 的攔截器。通過配置 http response inteceptor ,當後端介面返回 401 Unauthorized(未授權) ,讓使用者重新登入。通過這個專案學習如何實現一個前端專案中所需要的 登入及攔截、登出、token失效的攔截及對應 axios 攔截器的使用。
程式碼如下:
const instance = axios.create({ baseURL: 'http://www.laravel5.5.com/api/', timeout: 10000, }); //POST傳參序列化(新增請求攔截器) // 在傳送請求之前做某件事 instance.interceptors.request.use(config => { // // 設定以 form 表單的形式提交引數,如果以 JSON 的形式提交表單,可忽略 if(config.method === 'post'){ // JSON 轉換為 FormData const formData = new FormData(); Object.keys(config.data).forEach(key => formData.append(key, config.data[key])) config.data = formData } // 下面會說在什麼時候儲存 token if (localStorage.token) { config.headers['Authorization'] = localStorage.token; config.headers['Accept'] = 'application/json'; // config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; // store.dispatch('logined', localStorage.token) } return config },error =>{ alert("錯誤的傳參", 'fail') return Promise.reject(error) }) // 自定義的 axios 響應攔截器 instance.interceptors.response.use((response) => { // 判斷一下響應中是否有 token,如果有就直接使用此 token 替換掉本地的 token。你可以根據你的業務需求自己編寫更新 token 的邏輯 var token = response.headers.authorization; if (token) { // 如果 header 中存在 token,那麼觸發 refreshToken 方法,替換本地的 token axios.defaults.headers.common['Authorization'] = token; } return response }, (error) => { if (error.response) { switch (error.response.status) { case 401: // 這裡寫清除token的程式碼 router.replace({ path: 'login', query: {redirect: router.currentRoute.fullPath}//登入成功後跳入瀏覽的當前頁面 }) } } return Promise.reject(error) }); Vue.http = Vue.prototype.$http = instance;
簡單的分享一下自己的程式碼;這是本人結合JWT-Auth定製的axios攔截,
1.根據使用者是否登陸,檢視使用者請求頭是否攜帶token
2.根據判斷後臺響應值headers是否攜帶Authorization值,如果存在,重新整理Token
3.如果使用者授權失敗,直接跳至登陸頁面
感謝大家有時間觀看部落格,本人後端人員,純菜鳥一枚,如有什麼不對的地方,請多多支出