traitement de compatibilité de l'intercepteur vue

Cette fois, je vais vous présenter le processus de compatibilité de l'intercepteur vue. Quelles sont les précautions lors de l'utilisation de la compatibilité de l'intercepteur vue ? Voici des cas pratiques, jetons un coup d'oeil.

Dans le projet, vue est utilisée pour créer la page frontale, et l'interface API d'arrière-plan est demandée via axios pour terminer l'interaction des données. Si le jeton de mot de passe de vérification est écrit dans chaque interface, cela demandera beaucoup de travail manuel et ne sera pas flexible. Nous partageons ici l'utilisation de l'intercepteur intégré de vue pour ajouter un jeton à l'en-tête de chaque requête et il est compatible avec IE9.

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) {
    }
  });

Écrivez-le au dos. Comme mon token est placé dans le cache, avant chaque requête, je retirerai d'abord le token sur le front-end et vérifierai son actualité. S'il expire ou n'existe pas, je passerai d'abord à la page de connexion sans passer par l'intercepteur. . Allez demander la demande. Veuillez également vous référer à la méthode Mounted() pour plus de détails.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des cas d'utilisation d'utils.js

Comment utiliser Vue pour faire fonctionner DIV

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!