优化代码-统一设置headers

在代码中，我们经常需要发送HTTP请求，并且可能需要在每个请求中设置相同的headers。这样做会导致代码冗余，并且不方便维护。为了解决这个问题，我们可以使用axios库，在每个请求中统一设置headers。

使用axios设置默认headers

在我们的项目中，我们可以在axios中设置默认headers，这样每次发送请求时都会自动携带这些headers。具体操作如下：

找到app.vue文件，在beforeCreate钩子函数中设置axios的默认headers。

frontend/src/App.vue

<script>
import axios from "axios";

export default {
  name: "App",
  beforeCreate() {
    this.$store.commit("initializeStore");
    // 设置axios headers
    const token = localStorage.getItem("token");
    if (token) {
      axios.defaults.headers.common["Authorization"] = "JWT " + token;
    } else {
      axios.defaults.headers.common["Authorization"] = "";
    }
  },
};
</script>

以上代码中，我们先通过localStorage.getItem('token')获取了存储在本地的token。如果token存在，则设置axios的默认headers的authorization属性为JWT token，其中token是我们获取到的实际token值。如果token不存在，则将axios的默认headers的authorization属性设置为空。

删除原来的Headers代码

设置完成后，我们可以删除所有发送请求时手动设置headers的代码。比如在添加收藏和取消收藏的请求中，我们可以删除对Headers的设置。

frontend/src/views/MovieDetail.vue

    // 收藏电影
    collect_movie(movie_id) {
      axios
        .post("/api/collects/", { movie_id: movie_id })
        .then((response) => {
          const status_code = response.data.status_code;
          const message = response.data.message;
          if (status_code === 0) {
            this.collectStatus = true;
            this.collectMessage = "取消收藏";
            showMessage(message, "info");
          } else {
            showMessage(message, "error");
          }
        })
        .catch((error) => {
          showMessage("收藏失败");
        });
    },

这样，在每个请求中都会自动携带axios的默认headers，我们就不需要再手动设置headers了。

通过这种方式，我们可以统一设置headers，并且减少代码冗余。这样不仅方便维护，也提高了代码的整洁度。

好了，本节内容到这里就结束了。