token響應式設定

2021-10-11 03:19:54 字數 2537 閱讀 6403

處理使用者 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月份提出的乙個概念,簡而言之,就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。優點 面對不同解析度裝置靈活性強 能夠快捷解決多裝置顯示適應問題 缺點 相容各種裝置工作量大,效率低下 累贅,會...