vue router实现路由拦截功能
原创
©著作权归作者所有:来自51CTO博客作者达达智能的原创作品,请联系作者获取转载授权,否则将追究法律责任
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");