涂鸦云开发 demo 登录

涂鸦Iot 云开发平台提供了 前后端demo，

前端demo地址：

git clone https://github.com/tuya/iot-portal.git

后端demo地址：

https://github.com/tuya/iot-server.git

此demo采用微前端框架qiankun，react框架来开发的。前端要配置代理访问后端接口，前端demo中配置代理如下：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app, opts = {}) {
  const apiPath = opts.apiPath || '/api';
  const target = 'http://localhost:8080/';

  app.use(
    apiPath,
    createProxyMiddleware(Object.assign({
      // see more: https://github.com/chimurai/http-proxy-middleware#options
      target,
      changeOrigin: true,
      headers: {},
    }, opts)),
  );
}

后端demo跑到本地8080端口上（http://localhost:8080/），如果请求路径带有/api 则代理到后端demo服务上。这个前端demo 直接用express起的服务。如果我们采用vue框架怎么配置此代理呢？

用vue-cli创建的项目，直接在根目录创建vue.config.js即可，并配置devServer，如下所示：

module.exports = {
  chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
      args[0].title = "管理平台";
      return args;
    });
  },
  devServer: {
    port: '8085',
    proxy: {
      "/api": {
        target: "http://localhost:8080/",
        changOrigin: true,
      },
    },
  },
};

配置后，启动项目请求接口：

      import { apiService } from "@tuya/connector";

      apiService
        .multiLogin({
          userName: _mailForm.address,
          pwd: _mailForm.mailSecret,
        })
        .then((userToken) => {
          this.afterLogin(userToken, _mailForm.address)
        })

报了404错误，看着请求接口路径并没有/api   而是http://localhost:8085/login

应该为http://localhost:8085/api/login

原来没有配置baseUrl导致的，加上此配置接口请求成功：

import { configMethod } from '@tuya/connector';

const init = () => {
  const msgWhiteList = [];

  configMethod.initGlobalConfig({
    headers: {
      'Accept-Language': 'zh-CN'
    },
    baseURL: '/api',
    onError: (errorObj) => {
      const { code, apiMethodName } = errorObj;

      if (code === '1010' || code === '111') {
        localStorage.removeItem('_USERNAME');
        localStorage.removeItem('_UID');
        localStorage.removeItem('_ROLE_TYPE');

        if (window.location.pathname !== '/login') {
          window.location.replace('/login');
        }
        return;
      }

      // 需屏蔽的方法
      if (msgWhiteList.includes(apiMethodName)) {
        return;
      }
    },
  });
};

export default init;