最近项目有一个需求，要求实现一个系统的自动登录和注销，后端方面决定采用token记录登录行为。本人南邮大三在校生一枚，自然没有什么经验，在自我摸索的路上吃过很多亏，下面记录一下踩坑记录

登录进行表单验证，通过了，后端就会返回一个token，前端获取到这个token后，可以将它存在localStorage中，代码如下：

import axios from "axios";
axios.defaults.withCredentials = true;
import qs from "qs";

// 用户登录
    Sign_In() {
      let that = this;
      let params = qs.stringify({
        username: that.username,
        password: that.password,
      });
      axios
        .post("登录请求url", params, {
          headers: {
            Authorization: "token",
          },
        })
        .then((res) => {
          console.log(res);
          localStorage.setItem("token", res.data);
          this.$message({
            message: "登录成功",
            type: "success",
          });
          this.$router.push("/userList");
        })
        .catch((res) => {
          console.log(res.response);
          if (res.response.status == 403) {
            this.$message({
              message: res.response.data.message,
              type: "error",
            });
          }
        });
    },

当我们点击注销时，我们采用清空localStroage，并跳转至登录页面的方法，实现登出。这个方法逻辑上没有问题，还挺完美。

BUT，当真正按照这个逻辑实现的时候，发现事与愿违，清除localStroage后，确实进行了跳转，但是，会马上进行自动登录的token验证，然后神奇般地登录成功，说明，这个token虽然被清除，但是，浏览器没有刷新。

其实这个方法存在一个异步过程，就是清除localStroage时，我们需要再create登录页面时，先进行localStroage是否为空的判断，再决定要不要进入自动登录的token验证。

created: function() {
    if (localStorage.getItem("token") != null) {
      axios
        .get("判断当前登录状态的url")
        .then(() => {
          this.$message({
            message: "登录成功",
            type: "success",
          });
          this.$router.push("要跳转的页面");
        })
        .catch((res) => {
          console.log(res.response);
          return;
        });
    }
  },

这个问题解决后，我又遇到了另一个问题，登录是成功了，但是，需要手动刷新一下浏览器，才能获取到当前的登录信息，很影响体验。

所以，我使用了location.reload();强制刷新。我把它放在了created中，想着，页面生命周期开始的时候刷新一下不就好了嘛！

接着死循环便开始了，因为刷新后会重新开始这个页面的生命周期，location.reload();就根本停不下来！

思来想去，最后，我采用了如下方法，让页面只刷新一次

// 让页面只刷新一次
  mounted: function() {
    if (location.href.indexOf("#reloaded") == -1) {
      location.href = location.href + "#reloaded";
      location.reload();
    }
  },

问题解决
得出结论：菜鸟一枚，到处掉坑。