HTML
- 有如下html: 先看代碼后挑重點來說明:
<!DOCTYPE html><head><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script></head><body><div id="app"><div><input v-model="username" /><input v-model="password" /></div><div><button v-on:click="login">Login</button><button v-on:click="logout">Logout</button><button v-on:click="getUser">GetUser</button></div><div><button @click="logs=[]">Clear log</button></div><!-- 日志 --><li v-for="(log, idx) in logs" :key="idx">{{ log }}</li></div><script>axios.interceptors.request.use(config => {const token = window.localStorage.getItem("token");if (token) {// 判斷是否存在token, 如果存在的話, 則每個http header 都加上token// Bearer是JWT的認證頭部信息config.headers.common["Authorization"] = "Bearer " + token;}return config;},err => {return Promise.reject(err);});axios.interceptors.response.use(response => {app.logs.push(JSON.stringify(response.data));return response;},err => {app.logs.push(JSON.stringify(response.data));return Promise.reject(err);});var app = new Vue({el: "#app",data: {username: "test",password: "test",logs: []},methods: {login: async function() {const res = await axios.post("http://localhost:3000/users/login-token", JSON.stringify({username: this.username,password: this.password}));localStorage.setItem("token", res.data.token);},logout: async function() {localStorage.removeItem("token");},getUser: async function() {await axios.get("http://localhost:3000/users/getUser-token");}}});</script>
</body></html>
- 說明:
- 從script標簽開始說起:
axios.interceptors.request.use(): 攔截,每次發送http請求時,先執行里面的回調函數 - 回調函數:
config.headers.common["Authorization"] = "Bearer " + token: 中給request請求的首部添加一個"Authorization"字段, "Bearer "是JWT的認證頭部信息.
- 后續是3個函數登錄、登出、以及(鑒權)獲取用戶信息,實現邏輯如下:
login: POST請求,使用await 方法獲取返回的數據,將返回的數據存入瀏覽器的localStorage中
logout: 直接刪除本地localStorage中的"token"
getUser: 獲取鑒權的信息.(前面設置了,會自動發送Token)
Token驗證:
原理:
- 客戶端使用用戶名跟密碼請求登錄
- 服務器收到請求, 去驗證用戶名與密碼
- 驗證成功后, 服務器端會簽發一個令牌(Token), 再把這個 Token 發給客戶端
- 客戶端收到 Token 以后,可以把它存儲起來, 比如放在 Cookie里或者 Local Storage 里
- 客戶端每次向服務器請求資源的時候需要帶著服務端簽發的 Token
- 服務端收到請求,然后去檢驗客戶端請求里面帶著的 Token, 如果驗證成功, 就像客戶端返回請求的數據。
Token認證的優點:
- 后臺生成的token統一保存在瀏覽器的localStorage中(減少了服務器端的壓力);
- 通過jwt生成token,理論上只要后端的 secret 不泄漏,基本上認為是安全的…
![[數據結構] - ArrayList探究](http://pic.xiahunao.cn/[數據結構] - ArrayList探究)
)
