Day08 - 用 axios 做登入功能

在专案中透过

npm install --save axios

载入 axios

新增一个 SFC, 也就是一个 .vue 档
template

<template>
  <div class="container">
    <!-- submit 事件触发时，执行 login -->
    <form @submit.prevent="login">
      <div class="mb-3">
        <label for="inputEmail" class="form-label">Email address</label>
        <input
          type="email"
          class="form-control"
          id="inputEmail"
          aria-describedby="emailHelp"
          v-model="user.email"
        />
      </div>
      <div class="mb-3">
        <label for="inputPassword" class="form-label">Password</label>
        <input
          type="password"
          class="form-control"
          id="inputPassword"
          v-model="user.password"
        />
      </div>
      <!-- type 为 submit 让按下後得以触发 submit -->
      <button type="submit" class="btn btn-primary">Submit</button>
      <button type="button" class="btn btn-primary ml-5" @click="getData">
        Get Data
      </button>
      <button type="button" class="btn btn-primary" @click="logout">
        Logout
      </button>
    </form>
  </div>
</template>

script

<script>
// 记得要先 import axois
import axios from "axios";
export default {
  name: "Login",
  data() {
    return {
      // 与使用者输入的帐密栏位 v-model 双向绑定
      user: {
        email: "",
        password: "",
      },
      // getData 时会先从浏览器 cookie 叫出 Token 存来此元件
      token: "",
    };
  },
  methods: {
    login() {
      // 如果一开始没有 import axios 的话
      // 用 require("axios").default 也可以让我们使用 axios
      // const axios = require("axios").default;
      axios
        .post(`你的 api 喔`, this.user)
        .then((res) => {
          const token = res.data.token;
          const expired = res.data.expired;
          // 将 token 与他的到期时间存到浏览器 cookie 里
          document.cookie = `loginToken = ${token}; expires = ${new Date(
            expired * 1000
          )};`;
        });
    },
    getData() {
      // 先从浏览器 cookie 取得 token
      this.token = document.cookie.replace(/(?:(?:^|.*;\s*)loginToken\s*=\s*([^;]*).*$)|^.*$/, "$1");
      const api = `你的 api 喔`;

      // https://github.com/axios/axios#global-axios-defaults
      // 并且 header 按照後端 api 文件的规格要求填上 Bearer token 字样
      axios.defaults.headers.common.Authorization = `this.token`;
      axios.get(api).then((res) => {
        console.log(res);
      });
    },
    logout() {
      // 清除浏览器 cookie 的 Token
      document.cookie = `loginToken = ""; expires = "";`;
    },
  },
};
</script>

style

今天的练习纯用 bootstrap 所以就没有 style code 哩

若上述理解有误，都在麻烦提点了～～感谢您 (っಠ‿ಠ)っ