登錄驗證 Token 是 Web 應用程序中的一個非常重要而且常見的功能,在用戶登錄認證成功后,服務端會生成一個 Token 并將其返回給客戶端。客戶端在后續請求時需要將 Token 攜帶在請求頭中,服務端接收到請求后從 Token 中解析出用戶信息并進行校驗,以此來判斷請求是否合法或者用戶是否有權限進行該操作。
在 Vue 中使用 Token 進行登錄驗證的實現方法也很簡單。我們可以借助 axios 中的攔截器將 Token 添加到請求頭中,同時對請求的響應進行攔截處理,判斷響應是否為 Token 失效或者權限不夠等錯誤,進行相應的提示,并在需要時進行重新登錄的處理。
// 在請求頭中添加 Token import axios from 'axios' import store from '@/store' // 請求攔截器 axios.interceptors.request.use( config =>{ if (store.getters.token) { config.headers.Authorization = 'Bearer ' + store.getters.token } return config }, error =>{ return Promise.reject(error) } )
以上代碼中,我們將 Token 添加到請求頭 Authorization 中,值為 Bearer + Token。這里的 store.getters.token 是我們在 Vuex 中獲取的用戶 Token,如果獲取不到則說明用戶沒有登錄或者登錄已失效,此時需要進行相應的處理。
// 響應攔截器 axios.interceptors.response.use( response =>{ const res = response.data // 錯誤處理 if (!res.success) { if (res.code === '1001') { // Token 失效,重新獲取 Token 并重新登錄 store.dispatch('user/resetToken') // 清楚 Token location.reload() // 刷新頁面 } else { // 其他錯誤,進行提示 alert(res.message) } } return res }, error =>{ alert('網絡錯誤,請稍后再試~') return Promise.reject(error) } )
以上是響應攔截器中的處理邏輯,當服務端返回錯誤時會根據錯誤碼進行相應的提示或者操作。當錯誤碼為 1001 時,代表用戶 Token 失效,此時我們需要清除用戶 Token 并進行重新登錄。這里的 resetToken 和 location.reload() 方法是一個自定義的操作方法和頁面刷新方法,代碼中的實現方式可能各不相同。
通過以上簡單的實現方式,我們就能夠很方便地對前端進行登錄驗證。當然,登錄驗證的實現還需要配合服務端進行,要充分考慮到用戶 Token 的安全性和有效期問題,以及權限控制等相關考慮。
下一篇c如何制作json數據