vue router实现路由拦截功能

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "animate.css";
import store from "./store";

createApp(App)
  .use(store)
  .use(router)
  .use(ElementPlus, {
    size: "mini",
    zIndex: 3000,
  })
  .mount("#app");

router.beforeEach((to, from, next) => {
  if (to.matched.some((res) => res.meta.requireAuth)) {
    // 验证是否需要登陆
    // var id = window.sessionStorage.getItem("user");
    var id = store.state.user;
    console.log(id);
    if (id) {
      // 查询本地存储信息是否已经登陆
      next();
    } else {
      next({
        path: "/login", // 未登录则跳转至login页面
        redirect: "/", // 登陆成功后回到当前页面，这里传值给login页面，to.fullPath为当前点击的页面
      });
    }
  } else {
    next();
  }
});

login.vue

this.$message.success("登录成功");
this.$store.commit("setUser", data.data);

退出

        this.$store.commit("setUser", null);
          this.$router.push("/login");