axios如何发送Basic Auth

title: axios如何发送Basic Auth date: 2018-02-07 00:19:56 tags: [axios,Basic Auth]

被VUE和axios折磨的岁月,碰到404和401错误

axios如何发送Basic Auth认证数据？？

这几天都在搞vue和flask前后端分离的小东西 后端采用了HTTPBasicAuth加令牌认证 然后写好后端接口,就用前端axios发送请求

//前端
//api.js
let base = 'http://127.0.0.1:5000/api';

export const requestLogin = params => {
    return axios.post(`${base}/login`, params).then(res => res.data);
};

//Login.vue
    methods: {
      handleSubmit2(ev) {
        var _this = this;
        this.$refs.ruleForm2.validate((valid) => {
          if (valid) {
            this.logining = true;
            //NProgress.start();
            var loginParams = { name: this.ruleForm2.account, password: this.ruleForm2.checkPass };
            requestLogin(loginParams).then(data => {
              .....
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }

//后端
@auth.verify_password
def verify_password(name_or_token, password):
    if request.path == "/api/login":
        admin = Admin.query.filter_by(name=name_or_token).first()
        if not admin or not admin.verify_password(password):
            return False
    else:
        admin = Admin.verify_auth_token(name_or_token)
        if not admin:
            return False
    g.admin = admin   
    return True

如上发送数据查看控制台一直报错404 搜了好久发现是模板问题(这里使用的是vue-admin后台模板) 需要注释掉mock测试数据才能进行后端接口测试 关于axios特别说明request failed with status code 404

然后继续测试,发现又报错401 看了下代码感觉没什么错误...... 然后就用postman模拟了下请求,发现也是同样的错误

{
    "error": "Unauthorized access"
}

然后再看后端代码HTTPBasicAuth.....原谅我很少搞前后端分离 这个BasicAuth的接口需要特殊的发送请求 postman中指定auth类型就能发送成功

转向axios查找文档发现

// `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
// This will set an `Authorization` header, overwriting any existing
// `Authorization` custom headers you have set using `headers`.
auth: {
  username: 'janedoe',
  password: 's00pers3cret'
},

于是修改api.js中axios为下面的样子

export const requestLogin = params => {
    return axios({
        method: 'POST',
        url: `${base}/login`,
        auth: params
    })
    .then(res => res.data);
};

然后......还是401 在控制台消息头中发现Authorization的值和postman中的不一样 只包含了password的值,尝试修改Login.vue中loginParams的name为username 状态码200K......................... en.........好好看文档,好好学习

其他url如何post Token???

不是很清楚正确的姿势是什么,按照后端的代码 auth认证的方式会首先检验是否为token 即发送token也是同样的post格式

export const getAdmin = params => { 
    return axios({
        method: 'GET',
        url: `${base}/admin`,
        auth: {username: params}
    })
    .then(res => res.data);
};

#params是取得的token

这里有个点就是我按照这个方法请求之后 还是一直报错401,就是验证失败 后来才发现是前端post的token含有双引号 去掉之后就可以正确post了