vue——接口修改请求头——有些接口不需要请求头传递token—

这篇具有很好参考价值的文章主要介绍了vue——接口修改请求头——有些接口不需要请求头传递token——基础积累。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近在写后台管理系统的时候，遇到一个切换租户的功能。在请求接口的时候不需要传递token

效果图

vue——接口修改请求头——有些接口不需要请求头传递token——基础积累,vue技能提升,前端基础知识,javascript知识点,vue.js,前端,javascript
直接上代码吧：

1.html代码

login2(this.user.id, this.ruleForm.tenantType)
.then(this.afterLogin)
.finally(() => {
  this.confirmLoading = false;
  if (this.ruleForm.tenantType) {
    localStorage.setItem('tenant', this.ruleForm.tenantType);
    let tenantUserName = '';
    let obj = this.tenantList.find(
      (item) => item.id == this.ruleForm.tenantType
    );
    if (obj) {
      tenantUserName = obj.name;
      localStorage.setItem('tenantUserName', tenantUserName);
    }
  } else {
    localStorage.removeItem('tenant');
    localStorage.removeItem('tenantUserName');
  }
});
afterLogin(res) {
  const loginRes = res;
  if (loginRes) {
    setAuthorization({
      token: loginRes.access_token,
      expireAt: new Date(new Date().getTime() + loginRes.expires_in),
    });
    if (checkAuthorization()) {
      this.$store.dispatch('account/refreshPermissions', (res) => {
        if (res == 'success') {
          this.$message.success('操作成功', 3);
          this.visible = false;
          this.confirmLoading = false;
          location.reload();
        }
      });
    }
  }
},

2.login2接口内容

export async function login2(id, tenant) {
  const params = {
    id
  };
  let config = {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      Authorization: '',//此处设置了请求token，但是并未生效
    },
  };
  if (tenant) {
    config.headers.__tenant = tenant;//设置请求头
  }
  return request(LOGIN, METHOD.POST, qs.stringify(params), config);
}

3.axios拦截器处理内容

const reqCommon = {
  /**
   * 发送请求之前做些什么
   * @param config axios config
   * @param options 应用配置 包含: {router, i18n, store, message}
   * @returns {*}
   */
  onFulfilled(config, options) {
    const { router, message } = options;
    const { url, xsrfCookieName, headers } = config;
    if (
      headers.Authorization &&
      xsrfCookieName &&
      !Cookie.get(xsrfCookieName)
    ) {
      message.warning('认证 token 已过期，请重新登录');
    }
    if (!headers.__tenant) {//如果有租户的信息，则表示要清空token，然后重新登录
      config.headers['Authorization'] = Cookie.get(xsrfHeaderName);
    } else {
      delete config.headers.Authorization;
    }
    return config;
  },
  //其他内容省略了。。。
}

完成！！！多多积累，多多收获！

下面介绍一下axios的基本用法：

axios官网

axios官网：https://www.axios-http.cn/docs/intro

vue——接口修改请求头——有些接口不需要请求头传递token——基础积累,vue技能提升,前端基础知识,javascript知识点,vue.js,前端,javascript

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

Axios 实例

创建一个实例
您可以使用自定义配置新建一个实例。

axios.create([config])
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

默认配置

默认配置
您可以指定默认配置，它将作用于每个请求。

全局 axios 默认值
axios.defaults.baseURL = ‘https://api.example.com’;
axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
自定义实例默认值
// 创建实例时配置默认值
const instance = axios.create({
baseURL: ‘https://api.example.com’
});

// 创建实例后修改默认值
instance.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;
配置的优先级
配置将会按优先级进行合并。它的顺序是：在lib/defaults.js中找到的库默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后面的优先级要高于前面的文章来源地址https://www.toymoban.com/news/detail-547364.html

到了这里，关于vue——接口修改请求头——有些接口不需要请求头传递token——基础积累的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！