2017-4-7_작업 보고서

작업 내용

개판 업체의 코드 변경 상태를 스캔하는 페이지

신규 메시지 페이지

fix가 처음으로 axios 설정interceptors를 불러오고 차단할 수 없는 버그

에 응답합니다

 loadData() {
        axios.get(`${API.shop_admin_status_list}/${this.orderId}?openId=${this.openId}`)
          .then((res) => {
            //   code 501  axios        login
            if (res.data.code === 200) {
              this.dataList = res.data;
            } else if (this.user_auth !== false) {  //      code   200             
              this.$router.replace('/message/error');
            }
          })
      }

axios 차단기 설정이 vue에 있는 루트 예외이기 때문에, vue 루트가 마운트된 후 vue 페이지 구성 요소를 실행하기 시작하여, 처음 불러온 페이지 구성 요소가 aax 요청을 보내면 axios 차단기에 차단되지 않습니다.해결 방안: 루트 실례의 생명주기created에axiosinterceptors를 설정하거나 vue의 루트 실례 성명 앞에 놓기

methods: {
    initHttpInterceptors() {
      const iswechat = this.$device.isWechat;
      // Add a response interceptor
      axios.interceptors.response.use((response) => {
        console.log('This is an interceptors');
        // Do something with response data
        if (501 === response.data.code && store.getters.user_auth === false) {
          Vue.nextTick(() => {
            console.log(`   ，         ...from=${app.$route.fullPath}`)
            app.$store.commit(types.SAVE_LASTPATH, app.$route.fullPath)
            // const oldurl=app.$route.fullPath;

            //    replace                     login
            //router.replace('/login')
            // const iswechat = this.$device.isWechat;
            const wechatlogin = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc4381b971b4d6938&redirect_uri=http%3A%2F%2Fapi.huiche.sungshan.com%2Fwechat%2Foauth%2FgetOpendId.do%3Furl%3Dhttp%253A%252F%252Fh5.huiche.sungshan.com%252Flogin%253Fopenid%253DOPENID&response_type=code&scope=snsapi_base&state=123&connect_redirect=1#wechat_redirect';
            if (iswechat) {
              window.location = wechatlogin;
            } else {
              router.replace('/login');
            }
          });
          return response;
        }
        console.dir(response)
        return response;
      }, (error) => {
        // Do something with response error
        console.warn('    ');
        console.dir(error)
        return Promise.reject(error);
      });
    }

created() {
    console.log('AppRoot created!')
    if (Modernizr.localstorage && window.localStorage.getItem('huiche-state')) {
      console.log('about to restore state...')
      //  storage，  store
      commit(types.RESTORE_STATE, JSON.parse(window.localStorage.getItem('huiche-state')));
    }
    //     jssdk
    Helper.wxConfig(['getLocation'], encodeURIComponent(window.location.href));
    //   action        
    this.$store.dispatch('UPDATE_LOCATION');

    //   axios    
    this.initHttpInterceptors();
  },

총결산
코드 최적화 사고: 설정 루트 갈고리와 단일 구성 요소 이벤트에 연결된 코드를 모두 단독init 방법으로 봉하여 vue 루트 실례의created에 넣고 이 방법을 집행할 수 있다. 그러면 전체 vue 루트 실례(또는 입구 js) 자신의 내부 생명 주기가 뚜렷하게 변하고 코드의 가독성과 유지보수성을 높일 수 있다.

created() {
   .....
   this.initRouterEach();
   this.initHttpInterceptors();
   this.bindEvents();
}

진전: 현재 백엔드 데이터와 상호작용하는 문제가 존재하기 때문에 백엔드와 연결해야 한다.