认证

VEF 的认证链路主要由三部分组成:

createApiClient() 维护 token 和刷新逻辑
createLoginRouteOptions() 承载登录页
createLayoutRouteOptions() 保护登录后页面

登录页怎么接

import { createFileRoute } from "@tanstack/react-router";
import { createLoginRouteOptions, LOGIN_ROUTE_ID } from "@vef-framework-react/starter";

import { apiClient } from "../../api";
import { login } from "../../apis/auth";

export const Route = createFileRoute(LOGIN_ROUTE_ID)(
  createLoginRouteOptions({
    onLogin: params => apiClient.executeMutation({ mutationFn: login, params })
  })
);

登录成功后做了什么

starter 内置的 Login 组件会在 onLogin 成功后:

把登录状态写入 useAppStore
写入 token
让 router 失效并重算
跳回 redirect 或首页
弹成功通知

刷新 token

这是 createApiClient() 配置里最关键的一环:

const apiClient = createApiClient({
  http: {
    baseUrl: "/api",
    tokenExpiredCode: 1002,
    async refreshToken(tokens) {
      return await apiClient.executeMutation({
        mutationFn: refreshAuth,
        params: tokens
      });
    }
  }
});

登出

推荐把真正的远程登出做成 mutation，然后交给布局路由的 onLogout 使用:

async function handleLogout() {
  await apiClient.executeMutation({
    mutationFn: logout
  });
}

客户端本地登出收尾由 handleClientLogout() 和 router 事件链统一处理。

登录页怎么接​

登录成功后做了什么​

刷新 token​

登出​

推荐实践​

登录页怎么接

登录成功后做了什么

刷新 token

登出

推荐实践