Detaillierte Erläuterung der Schritte für den Vue-Interceptor zur Implementierung eines einheitlichen Tokens und zur Kompatibilität mit IE9

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte für den Vue-Interceptor geben, um ein einheitliches Token zu erreichen und mit IE9 kompatibel zu sein Hier sind die tatsächlichen Fälle, schauen wir uns das einmal an. Im Projekt wird Vue zum Erstellen der Front-End-Seite verwendet und die Hintergrund-API-Schnittstelle wird über Axios angefordert, um die Dateninteraktion abzuschließen. Wenn das Verifizierungskennwort-Token in jede Schnittstelle geschrieben wird, ist viel manuelle Arbeit erforderlich und es ist nicht flexibel. Hier teilen wir die Verwendung des integrierten Interceptors von vue, um dem Header jeder Anfrage ein Token hinzuzufügen, und er ist mit IE9 kompatibel.

import axios from 'axios';
// 这里的config包含每次请求的内容，在这里把token放到请求头
axios.interceptors.request.use(function (config) { 
  let token = window.localStorage.getItem("tokenid"); //从缓存中取token
  if (token) {
    config.headers.Authorization = token;  //将token放到请求头发送给服务器
    //这里主要是为了兼容IE9
    var browser = navigator.appName;
    var b_version = navigator.appVersion;
    if (browser == 'Netscape' && b_version.indexOf(';') < 0) { //火狐
    } else {
      if (b_version.indexOf(&#39;;&#39;) < 0) {
        return config;
      }
      var version = b_version.split(";");
      var trim_Version = version[1].replace(/[ ]/g, "");
      if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE9.0") { //IE9
        if (config.url.indexOf(&#39;?&#39;) > 0) {
          config.url = config.url + "&token=" + JSON.parse(token).value;
        }
        else {
          config.url = config.url + "?token=" + JSON.parse(token).value;
        }
      }
    }
  } else {
    localStorage.clear(); //清空缓存
    if (router.currentRoute.name && router.currentRoute.name.toLowerCase() == "login") { 
  　　　　//这里需要排除登陆(或者说是第一次请求获取token)的时候的请求验证，我这里没做处理
　　　　　 //我的后台api接口，并没有对login接口做token验证，所以这里不做处理
    } else {  　　　　
  　　　　//除登陆接口外，其他需要token验证的方法，会走这里且返回null
      return null;
    }
  }
  return config;
}, function (err) {
  // return Promise.reject(err);
});
// http response 拦截器
axios.interceptors.response.use(
  response => {
    return response; //请求成功的时候返回的data
  },
  error => {
    try {
      if (error.response) {
        switch (error.response.status) {
          case 401://token过期，清除token并跳转到登录页面
            localStorage.clear();
            var baurl = window.location.href;
        　　　　　router.replace({
                path: 'login',
                query: { backUrl: baurl }
              });           
            return;
        }
      }
      return Promise.reject(error.response.data)
    }
    catch (e) {
    }
  });

Schreiben Sie es hinten. Da mein Token im Cache abgelegt wird, entnehme ich vor jeder Anfrage zunächst das Token am Frontend und überprüfe seine Aktualität. Wenn es abläuft oder nicht existiert, springe ich zuerst zur Anmeldeseite, ohne den Interceptor zu durchlaufen . Gehen Sie zur Anfrage. Weitere Informationen finden Sie auch in der Methode mount().

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung, wie die Top-Floating-Fixed-Funktion beim Gleiten mit vue+jquery+lodash implementiert wird

JQuery implementiert eine elektronische Uhr. Detaillierte Erläuterung der Funktionsschritte

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte für den Vue-Interceptor zur Implementierung eines einheitlichen Tokens und zur Kompatibilität mit IE9. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!