欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

vue 登錄驗證token

林國瑞2年前7瀏覽0評論

登錄驗證 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 的安全性和有效期問題,以及權限控制等相關考慮。