Vue实现登录保存token并校验实现保存登录状态-蒲公英云

Vue实现登录保存token并校验实现保存登录状态

文章目录

一、登录vue
二、路由index

一、登录vue

<script>
import request from "@/axios/baseURL";
import router from "@/router";
// 接口数据初始化
const FORM_DATA = {
  userName: "",
  password: "",
};
export default {
  data() {
    return {
      FORM_DATA,
    };
  },
  created() {
    console.log("登录界面");
  },
  methods: {
    login() {
      request.post("/systemUser/login", this.FORM_DATA).then((res) => {
        var code = res.data.code;
        var message = res.data.message;
        this.$message(message);
        if (code == 0) {
          localStorage.setItem("token", res.data.data.token);
          router.push("/library");
        }
        console.log(res);
      });
    },
  },
};
</script>

二、路由index

// 导航守卫
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  const outerPaths = ['/homePage']; // 当前 path 不需要登录也可以进入系统，但是只能操作当前页面
  if (!token && !outerPaths.includes(to.path)) {
    next('/homePage');
  } else {
    // if (to.path == "/auth") {
    //   document.title = to.meta.title  // 进入这个页面会被更改页面标题
    // } else document.title = 'CPS流量变现后台管理系统'
    next();
  }
});