2017-4-7_工作报告

工作内容

• 改版商家扫码更改状态的页面
• 新增消息页
• fix 首次加载axios设置interceptors，响应无法被拦截到的bug

 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页面组件，导致首次加载的页面组件发送ajax请求无法被axios拦截器拦截。
解决方案：在根实例的生命周期created中设置axios interceptors或者放在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();
}

进展: 目前存在一些和后端数据交互上的问题，需要和后端联调