Vue3 + Pinia + Router 做beforeEach路由拦截

需求

• 在Pinia Store存储登录凭证，在router中使用。登录失效或退出时，清空凭证。
• 未登录时，禁止通过地址栏跳转页面。
• 登录失效时，禁止history地址导航。并且替换掉失效前的地址，只在login页停留。

一、代码

// pinia中user.ts
import { reactive, ref } from "vue";
import { defineStore, acceptHMRUpdate } from "pinia";


export const useUser = defineStore(
  "userInfo",
  () => {
   
    let token = ref<string>("");
    let isAuthenticated = ref<boolean>(false);

  
    // 设置token
    const setToken = (str: string = "") => {
      token.value = str;
    };
    // 设置是否通过验证
    const setAuthenticated = (flag: boolean = false) => {
      isAuthenticated.value = flag;
    };

    // 清空缓存
    const clearStorage = () => {
      setToken();
      setAuthenticated();
    };
    return {
      isAuthenticated,
      token,
      setToken,
      setAuthenticated,
      clearStorage,
    };
  },
  {
    persist: {
      // 自定义持久化方式
      storage: window.sessionStorage,
      // beforeRestore: (context) => {
      //   console.log("Before", context);
      // },
      // afterRestore: (context) => {
      //   console.log("After", context);
      // },
    },
  }
);
// 热更新 编辑你的 store，并直接在你的应用中与它们互动，
// 而不需要重新加载页面，允许你保持当前的 state、并添加甚至删除 state、action 和 getter。
if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useUser, import.meta.hot));
}

// router.ts
import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";
// store
import { useUser } from "@/stores/user";
const router = createRouter({
    // ...
});
// 路由前置守卫
router.beforeEach((to, from, next) => {
  // 路由器在安装完之后就会开始导航。
  // Pinia 也将被安装。
  const userStore = useUser();
  // isAuthenticated 为登录凭证
  if (to.path !== "/login" && !userStore.isAuthenticated) {
    // 即使位置与当前位置相同，也会触发导航。
    // 注意，这也将向历史记录中添加一个新条目，除非“replace:true”`通过
    // 添加 force 字段后，地址栏不会在登录失效后，跳转到其他页面，点击history只会停留在/login
    next({ path: "/login", replace: true ,force:true});
  } else {
    next();
  }
});

export default router;