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了