nuxt3之auth组件的使用:

1.需要登录的页面
<script setup lang="ts">
definePageMeta({
  middleware: "auth", // 没有对 auth 再进行配置
});
</script>
  
2.登录页面
<script setup lang="ts">
definePageMeta({
  middleware: "auth",
  auth: { //这是一个对当前使用 auth 中间件的一个配置，只对当前页面生效
    unauthenticatedOnly: true, // 说明 只有无登录的用户才能访问这个页面
    navigateAuthenticatedTo: "/account/profile", // 当已登录的用户再次访问这个页面的时候，跳转到 个人profile页面
  },
});
</script>
  
3.auth中间件
export default defineNuxtRouteMiddleware(async (to, from) => {
  if (process.server) return
  const { isLoggedIn } = useAuthUtils();

  const authConfig = to.meta.auth || {};
  const unauthenticatedOnly = authConfig.unauthenticatedOnly === true;
  const navigateAuthenticatedTo = authConfig.navigateAuthenticatedTo || '/';

  const isAuthPage = to.path.startsWith('/auth/');

  if (!isLoggedIn.value && !isAuthPage) {
    return navigateTo(`/auth/login?target=${to.fullPath}`);
  }else if (isLoggedIn.value && unauthenticatedOnly) {
    return navigateTo(navigateAuthenticatedTo);
  }
})
  
如果不想这么细粒度的控制登录的话，直接处理target情况就可以了
export default defineNuxtRouteMiddleware(async (to, from) => {
  if (process.server) return
  const { isLoggedIn } = useAuthUtils();
  const isAuthPage = to.path.startsWith('/auth/');
  if (!isLoggedIn.value && !isAuthPage) {
    return navigateTo(`/auth/login?target=${to.fullPath}`);
  }
})
  
再次改进版本:
export default defineNuxtRouteMiddleware(async (to) => {
  if (import.meta.server) return;
  const { isLoggedIn } = useAuthUtils();
  const isAuthPage = to.path.startsWith("/auth/");
  if (!isLoggedIn.value && !isAuthPage) {
    return navigateTo(`/auth/login?target=${to.fullPath}`, { 
      replace: true,
      external: true
    });
  }
});
  
改进原因:  
当用户试图访问需要认证的页面（target 页面）时，系统会将他们重定向到登录页面。然而，如果不进行特殊处理，登录页面会继承目标页面的布局，导致登录页面的显示出现问题。这个是实际开发中遇到的问题.
navigateTo象包含两个属性：
replace: true：这会使用新的 URL 替换当前的历史记录条目，而不是添加一个新的。
external: true：这告诉 Nuxt 将导航视为外部导航，这将导致页面刷新。
  
4. to.path和 to.fullPath 区别
to.path 和 to.fullPath 是 Vue Router 中两个不同的属性，它们提供了关于目标路由的不同信息
  
to.path:
只包含 URL 的路径部分。
不包含查询参数和哈希。
例如，对于 URL "/users/profile?id=123#info"，to.path 将只返回 "/users/profile"。
  
to.fullPath:
包含完整的 URL，包括路径、查询参数和哈希。
是 URL 的完整表示，不包括域名和协议。
对于上面的例子，to.fullPath 将返回 "/users/profile?id=123#info"。
  
区别总结：
path 只关注 URL 的路径部分。
fullPath 包含路径、查询参数和哈希
  
使用场景：
  
使用 to.path 的情况：
当您只需要知道页面的基本路径时。
在不关心查询参数和哈希的情况下进行路由匹配。
  
使用 to.fullPath 的情况：
当您需要完整的 URL 信息，包括查询参数和哈希。
在需要保留所有 URL 信息进行重定向时。