집 > 기사 > 웹 프론트엔드 > Vue 인터셉터를 사용하여 통합 토큰 및 IE9와의 호환성을 달성하는 단계에 대한 자세한 설명

Vue 인터셉터를 사용하여 통합 토큰 및 IE9와의 호환성을 달성하는 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-15 11:03:141319검색

이번에는 Vue 인터셉터가 통합 토큰을 달성하고 IE9와 호환되기 위한 단계에 대해 자세히 설명하겠습니다. Vue 인터셉터가 통합 토큰을 달성하고 IE9와 호환되기 위한 주의 사항은 무엇입니까? 실제 사례이므로 살펴보겠습니다.

프로젝트에서는 vue를 사용하여 프런트엔드 페이지를 구축하고 백엔드 API 인터페이스는 axios를 통해 요청하여 데이터 상호작용을 완료합니다. 확인 비밀번호 토큰을 각 인터페이스에 작성하면 수동 작업이 많아지고 유연성이 떨어집니다. 여기에서는 vue의 내장 인터셉터를 사용하여 각 요청의 헤더에 토큰을 추가하는 방법을 공유하며 이는 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) {
    }
  });

　뒷면에 적어주세요. 내 토큰은 캐시에 저장되므로 각 요청 전에 먼저 프런트 엔드에서 토큰을 꺼내어 적시성을 확인합니다. 토큰이 만료되거나 존재하지 않으면 인터셉터를 거치지 않고 먼저 로그인 페이지로 이동합니다. .요청하러 가세요. 자세한 내용은 Mounted() 메소드를 참조하세요.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!