Nuxt-auth V5用户端点工作原理及带用户标识的用户信息获取实现问询

Let’s work through your problem step by step—since your third-party auth system requires a user identifier (like username or ID) to fetch user details, the default static user endpoint configuration won’t cut it. Here’s how to adapt it to your needs:

1. Understand Nuxt-auth v5’s Default User Endpoint Behavior #

By default, when autoFetch: true, Nuxt-auth sends a GET request to a static user endpoint URL right after login. But since your endpoint needs a dynamic parameter (e.g., the UserName from your login response), we need to override this behavior with custom logic.

2. Capture the Username from Your Login Response #

First, make sure you’re storing the UserName field from your login API response. You can do this in two ways:

• Simple field mapping: If you just need the username stored initially in the auth state, set the user.property to match your login response’s field name:

  user: {
    property: 'UserName', // Matches the field name in your login response
    autoFetch: false, // We’ll fetch full user details manually later
  },
  

• Login hook for full control: Use the onLogin hook to access the raw login response and store additional data:

  auth: {
    strategies: {
      login: {
        // ... other existing config
        onLogin: async (strategy) => {
          // Grab the full login response from the token state
          const loginResponse = strategy.token.get().response;
          // Add the username to the auth user state
          strategy.state.user = { ...strategy.state.user, username: loginResponse.UserName };
        },
      },
    },
  }
  

3. Implement a Custom User Fetch Function #

The most flexible way to handle dynamic endpoints is to override the user.fetch method. This lets you construct the URL with the username from the login response and attach the required authorization header:

auth: {
  strategies: {
    login: {
      scheme: 'local',
      token: {
        property: 'access_token',
        required: true,
        type: 'Bearer',
      },
      refreshToken: {
        property: 'refresh_token',
        data: 'refresh_token',
        maxAge: 60 * 60 * 24 * 30
      },
      user: {
        autoFetch: true, // Keep auto-fetch enabled, but use our custom logic
        fetch: async (strategy) => {
          // Get the username from the stored login response
          const username = strategy.token.get().response.UserName;
          
          // Fetch user details from the dynamic third-party endpoint
          const userDetails = await $fetch(`/users/${username}`, {
            headers: {
              // Attach the Bearer token for authorization
              Authorization: `${strategy.token.options.type} ${strategy.token.get().value}`
            }
          });
          
          // Return the full user details to be stored in the auth state
          return userDetails;
        }
      },
      autoLogout: true,
      endpoints: {
        login: { url: '/registration/login', method: 'post', propertyName: 'access_token'},
        // No need for a static user endpoint URL since we’re using the custom fetch function
        logout: { url: '/registration/logout', method: 'post' },
      },
    },
  },
  redirect: {
    login: '/news',
  },
}

4. Alternative: Dynamic URL in Endpoints #

If you prefer to keep the endpoint structure but use a dynamic URL, define user.url as a function that retrieves the username from the auth state:

endpoints: {
  login: { url: '/registration/login', method: 'post', propertyName: 'access_token'},
  user: { 
    url: () => {
      const auth = useAuth();
      // Ensure the username is already stored in the auth state before this runs
      const username = auth.state.user?.username;
      return `/users/${username}`;
    }, 
    method: 'get', 
    propertyName: false 
  },
  logout: { url: '/registration/logout', method: 'post' },
}

Note: This approach depends on the username being available in the auth state when the user endpoint is called—make sure you’ve stored it during login (as shown in step 2).

Key Tips #

• Always include the Bearer token in your custom fetch request headers—Nuxt-auth won’t add it automatically if you use a fully custom fetch function.
• If your third-party system uses a user ID instead of username, just swap UserName with the ID field from your login response.

内容的提问来源于stack exchange，提问作者MFH