在 Vue 中使用 Axios 发送登录请求

在本教程中，您将学习如何构建一个使用 HTTP 基本身份验证 和 Axios 。

使用 Axios 进行设置

HTTPBin 提供了一个免费的示例端点来测试基本身份验证。端点 URL 包含用于测试目的的正确用户名和密码。 例如网址 https://httpbin.org/basic-auth/foo/bar 如果您为用户名 foo 和密码 bar 发送格式正确的基本身份验证，则成功，否则失败。

如果你通过 auth 选项 axios.get()，axios 会自动格式化 basic auth。

const res = await axios.get(<a href="https://httpbin.org/basic-auth/foo/bar">https://httpbin.org/basic-auth/foo/bar</a>, {
  // Axios looks for the `auth` option, and, if it is set, formats a
  // basic auth header for you automatically.
  auth: {
    username: foo,
    password: bar
  }
});
res.status; // 200

查看登录表单

在 Vue 中构建表单 很简单：只需使用 v-model，当用户提交登录表单时，调用 login() 使用上述 Axios 逻辑的方法。

const app = new Vue({
    data: () => ({
      username: ,
      password: ,
      error: null,
      success: false
    }),
    methods: {
      login: async function() {
        const auth = { username: this.username, password: this.password };
        // Correct username is foo and password is bar
        const url = <a href="https://httpbin.org/basic-auth/foo/bar">https://httpbin.org/basic-auth/foo/bar</a>;
        this.success = false;
        this.error = null;

        try {
          const res = await axios.get(url, { auth }).then(res => res.data);
          this.success = true;
        } catch (err) {
          this.error = err.message;
        }
      }
    },
    template: `
      <form @submit=login()>
        <h1>Login</h1>
        <div>
          <input type=string placeholder=Username v-model=username>
        </div>
        <div>
          <input type=password placeholder=Password v-model=password>
        </div>
        <div v-if=error>
          {{error}}
        </div>
        <div v-if=success>
          Logged in Successfully
        </div>
        <button type=submit>Submit</button>
      </div>
    `
  });