axios如何傳送Basic Auth

bay1發表於2018-06-22
iOS

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型別就能傳送成功

postman

轉向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了

相關文章