探索Quasar 02

目标:加入登录api的调用方式

由于登录走的是IdentityServer,ids是另一个服务地址,和业务系统存在2个地方不一致。

1.请求地址不一致

因此proxy添加新地址

      proxy: {
        '/api': {
          target: 'http://localhost:44347',
          changeOrigin: true
        },
        '/ids': {
          target: 'http://localhost:44331',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/ids/, '')
        }, 
      }

  

2.请求内容类型不一致

因此添加axios的拦截请求,在其中修改ids的内容类型为 application/x-www-form-urlencoded;charset=utf-8。默认内容类型为 application/json;charset=utf-8

// 拦截请求
axios.interceptors.request.use(
  (config:AxiosRequestConfig) => {
    if(config)
    {
      console.log(config);
      const x = <AxiosHeaders>(config!.headers! as unknown);
      if(config.url!.startsWith("/ids/"))
      {
        x.set("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
      }
      else{
        x.set("Content-Type","application/json;charset=utf-8");
      }
      
      console.log(config.headers);
      //config.headers?.set("Authorization",`Bearer ${accessToken}`);
    }
          
    return config
  },
  error => {
    console.log('request error: ', error)
    return Promise.reject(error)
  }
)

  

 登录api如下

import axios from 'src/lib/axios'
export const login = (obj:{mobile:string, password:string}) => {
  const data = {
      "client_id":"myclientid",
      "client_secret":"123456",
      "grant_type":"password",
      "username":obj.mobile,
      "password":obj.password
  };

  return axios({
    url: '/ids/connect/token',
    method: 'post',
    data
  })

  

posted on 2022-12-14 15:35  GilChen  阅读(46)  评论(0编辑  收藏  举报