生活随笔
收集整理的這篇文章主要介紹了
koa --- jwt实现最简单的Token认证
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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) {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 不泄漏,基本上認為是安全的…
總結
以上是生活随笔為你收集整理的koa --- jwt实现最简单的Token认证的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
