Nuxt3+pinia --- 路由拦截

1 - store/user.store.ts

import { defineStore } from "pinia";

import type {
  User
} from "@/interface/user.interface";

export default defineStore('user', {
  state() {
    return {
      name: 'user',
      user: {} as User,
    }
  },
  actions: {
    updateUser(payload: User | object) {
      this.user = payload;
    },
  },
  getters: {
    loginState(state) {
      return !!state.user?.token
    }
  },
  // localstorage & sessionStorage 需要使用 client-only 组件 包裹起来
  // persist: {
  //   enabled: true,
  //   strategies: [
  //     {
  //       key: "auth",
  //       storage: process.client ? localStorage : undefined,
  //       paths: ["user"],
  //     }
  //   ]
  // }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

2 - middleware/auth.ts

import {
  defineNuxtRouteMiddleware,
  navigateTo,
} from "#app";

import useUserStore from "@/store/user.store";

export default defineNuxtRouteMiddleware((to, form) => {
  const userStore = useUserStore();
  if (userStore.loginState) {
    console.log('已登录')
  } else {
    console.log('未登录')
    return navigateTo({path: `/auth/login`, query: {redirect: to.fullPath}});
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

需要使用该中间件的页面 去 通过 definePageMeta 去 使用

3 - middleware/init.global.ts

import useUserStore from "@/store/user.store";
import type {
  User
} from "@/interface/user.interface";

export default () => {
  const userStore = useUserStore();
  const authCookieStorage = useCookie<User>('auth');
  userStore.updateUser(authCookieStorage.value);
}
1
2
3
4
5
6
7
8
9
10

初始化 pinia store 仓库, 用来代替 vuex nuxtserverinit

nuxt 生命周期

4 - pages/edior

<script setup lang="ts">
definePageMeta({
  middleware: ['auth'],
});
</script>
1
2
3
4
5