Vue項目中:axios請求攔截器添加token驗證


為什么要做進行token驗證呢?

1、前后端分離的項目中,前端需要通過發送請求獲取數據,為了安全,需要保證前端發送過來的請求擁有可以獲取數據的權限

2、在基於token登錄的項目中,每次請求都需要為請求頭添加token字段,表示自己已經登陸過,擁有權限

3、token可以通過 jwt 在登錄的時候生成並保存到session中

4、每次發送請求的時候就需要在請求中加入token字段

如何解決?

通過axios請求攔截器添加token,保證獲取有權限的數據。

axios.interceptors.request.use(config => {

  config.headers.Authorization = window.sessionStorage.getItem('token')

  return config                                                                                                                                              

})

1、axios中有 interceptors 屬性,其中有 request 成員,就是一個請求攔截器

2、再通過 use 掛載一個回調函數,只要有請求通過 axios 發送到后台,就必然會優先調用 use 回調函數

3、return 就是將處理過的請求頭返回 也就是說這個請求攔截器就是一個預處理的過程

4、只需要在項目的 main.js 文件中全局設置一次即可


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM