vue3.2/Vite/Ts36: 路由鉴权
·
Yin灏
- src/permisstion.ts
import nprogress from "nprogress";
import "nprogress/nprogress.css";
// 去除右上角加载的小圆球
nprogress.configure({ showSpinner: false });
import router from "@/router";
// 获取 token
// 先获取大仓库
import pinia from "./store";
// 再获取小仓库
import useUserStore from "./store/modules/user";
let userStore = useUserStore(pinia);
import setting from "./setting";
// 全局前置守卫
router.beforeEach(async (to: any, from: any, next: any) => {
document.title = setting.title + "-" + to.meta.title;
nprogress.start();
let token = userStore.token;
let username = userStore.username;
if (token) {
// 已登录
if (to.path === "/login") {
next({
path: "/",
});
} else {
if (username) {
next();
} else {
// 获取用户信息
try {
await userStore.userInfo();
next();
} catch (err) {
// 退出登录
userStore.userLogout();
next({
path: "/login",
query: {
redirect: to.path,
},
});
}
}
}
} else {
// 未登录
if (to.path === "/login") {
next();
} else {
next({
path: "/login",
query: {
redirect: to.path,
},
});
}
}
});
// 全局后置守卫
router.afterEach((to: any, from: any) => {
nprogress.done();
});