處理使用者 token
token 是使用者登入成功之後服務端返回的乙個身份令牌,在專案中的多個業務中需要使用到:
但是我們只有在第一次使用者登入成功之後才能拿到 token。
所以為了能在其它模組中獲取到 token 資料,我們需要把它儲存到乙個公共的位置,方便隨時取用。
往哪兒存?
vuex 容器(推薦)
為了持久化,還需要把 token 放到本地儲存
import vue from 'vue'
import vuex from 'vuex'
vue.use(vuex)
export default new vuex.store(,
mutations:
},actions: ,
modules:
})
2、登入成功以後將後端返回的 token 相關資料儲存到容器中
async onlogin () )
try
+ this.$store.commit('setuser', res.data.data)
// 提示 success 或者 fail 的時候,會先把其它的 toast 先清除
this.$toast.success('登入成功')
} catch (err)
// 停止 loading,它會把當前頁面中所有的 toast 都給清除
// logintoast.clear()
}
登入成功之後後端會返回兩個 token:
我們的專案介面中設定的token
有效期是2 小時
,超過有效期服務端會返回401
表示 token 無效或過期了。
為什麼過期時間這麼短?
過期了怎麼辦?
如何使用refresh_token
解決token
過期?
處理邏輯
處理流程:
在axios的***中加入token重新整理邏輯
當使用者token過期時,去向伺服器請求新的 token
把舊的token替換為新的token
然後繼續使用者當前的請求
在請求的響應***中統一處理 token 過期:
* 封裝 axios 請求模組
*/import axios from "axios";
import jsonbig from "json-bigint";
import store from "@/store";
import router from "@/router";
// axios.create 方法:複製乙個 axios
const request = axios.create();
/** * 配置處理後端返回資料中超出 js 安全整數範圍問題
*/request.defaults.transformresponse = [
function(data) catch (err) ;
}}];
// 請求***
request.interceptors.request.use(
function(config) `;
}// do something before request is sent
return config;
},function(error)
);// 響應***
request.interceptors.response.use(
// 響應成功進入第1個函式
// 該函式的引數是響應物件
function(response) ,
// 響應失敗進入第2個函式,該函式的引數是錯誤物件
async function(error)
// 如果有refresh_token,則請求獲取新的 token
try `
}});
// 如果獲取成功,則把新的 token 更新到容器中
console.log("重新整理 token 成功", res);
store.commit("setuser", );
// 把之前失敗的使用者請求繼續發出去
// config 是乙個物件,其中包含本次失敗請求相關的那些配置資訊,例如 url、method 都有
// return 把 request 的請求結果繼續返回給發請求的具體位置
return request(error.config);
} catch (err)
}return promise.reject(error);
});export default request;
最全Media 響應式 設定方法
大家對於css3中media屬性並不陌生,但是隨著一些高視網膜的裝置面世,很多情況對於media的不標準的用法也越來越多,我通過查詢一些知識結合實踐給總結出一些標準的設定的方法。css3 中的 media queries 可以讓我們設定不同型別的 條件,並根據對應的條件,給相應符合條件的 呼叫相對應...
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計,對於pc設計乙個layout,在螢幕寬高有調整時,使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少,網頁布局就按照當時寫 的布局來布置 對於移動裝置,單獨設計乙個布局,使用不同的網域名稱如wap...
響應式布局的優缺點及設定
響應式布局是ethan marcotte在2010年5月份提出的乙個概念,簡而言之,就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。優點 面對不同解析度裝置靈活性強 能夠快捷解決多裝置顯示適應問題 缺點 相容各種裝置工作量大,效率低下 累贅,會...