快捷導(dǎo)航

Vue全局?jǐn)r截所有請(qǐng)求并在請(qǐng)求頭中添加token方式

更新時(shí)間：2024年08月28日 16:21:16 作者：三七有脾氣

這篇文章主要介紹了Vue全局?jǐn)r截所有請(qǐng)求并在請(qǐng)求頭中添加token方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Vue全局?jǐn)r截所有請(qǐng)求并在請(qǐng)求頭中添加token

在實(shí)際的項(xiàng)目中，為了登錄的安全，token是必不可少的，所以就需要前后端配合，后端生成和驗(yàn)證token（這方面我也寫過(guò)文章，講述后端對(duì)token的處理），前端在每一次請(qǐng)求中都要在請(qǐng)求頭上加上token。

第一步：先講一講前端要對(duì)token做什么

首先，當(dāng)我們?cè)诘卿涰?yè)面輸入賬號(hào)密碼之后，點(diǎn)擊登錄，后端除了會(huì)驗(yàn)證賬號(hào)密碼是否正確，還會(huì)生成token，然后將token與登錄結(jié)果一起返回。

這時(shí)候前端就需要解析后端返回的數(shù)據(jù)，取到token，放到sessionStorage中。

下面就是我隨便寫的提交登錄表單的方法

//提交表單數(shù)據(jù)
    submitForm(formName) {
      const that = this
      axios({
        method: "post",
        url: connectUrl+":10003/login/acount",
        data:{
          userName:this.ruleForm.userName,
          password:this.ruleForm.password,
          option:0,
          loginTime:new Date()
          } 
      }).then(function(response){
            if(response.data.code === 200){
              sessionStorage.setItem("token",response.data.data.token);
              sessionStorage.setItem("userName",response.data.data.userName);
            that.$router.push({
                name:'index'
                })
            that.$message.success("登錄成功")
          }else{
            that.$message.error("權(quán)限不足：賬號(hào)密碼錯(cuò)誤")
          }
          
      });
    }

簡(jiǎn)單來(lái)說(shuō)：

將token放入sessionStorage的操作的關(guān)鍵代碼就是這一行：

sessionStorage.setItem("token",response.data.data.token);

第二步：查看sessionStorage中是否保存了token

成功將token保存到sessionStorage后，就可以開(kāi)始攔截每次請(qǐng)求，將token放到請(qǐng)求頭中了

第三步：找到vue項(xiàng)目中的main.js文件，并引入axios

第四步：在main.js中寫相關(guān)的攔截請(qǐng)求的代碼

// 添加請(qǐng)求攔截器
axios.interceptors.request.use(function (config) {
  // 在發(fā)送請(qǐng)求之前做些什么
  // 判斷是否存在token,如果存在將每個(gè)頁(yè)面header添加token
  if (sessionStorage.getItem("token")) {
    config.headers.common['Authorization'] = sessionStorage.getItem("token");
  }
  return config
}, function (error) {
  router.push('/login')
  return Promise.reject(error)
})

上面是請(qǐng)求攔截器，其實(shí)還可以對(duì)響應(yīng)進(jìn)行攔截（可有可無(wú)，可以不寫，不影響請(qǐng)求攔截器的實(shí)現(xiàn)）

// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
  // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
  return response
}, function (error) {
  // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
  if (error.response) {
    switch (error.response.status) {
      case 401:
        store.commit('del_token')
        router.push('/login')
    }
  }
  return Promise.reject(error)
})