灏天阁

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();
});

- Book Lists -