Nuxt Auth模块登录后auth.loggedIn仍为false，重定向失效求助

Troubleshooting Steps for Your Nuxt Login Issue #

Hey there, let's walk through the key areas to check why your auth.loggedIn state stays false even though the /api/auth endpoint returns a 201 status:

• Verify Frontend Response Handling
  First, double-check the code where you handle the login API response. Are you explicitly updating the auth.loggedIn state (or calling the auth module's official login method) after a successful response? For example, if using @nuxtjs/auth, you should rely on this.$auth.loginWith('local', { ... }) instead of a raw axios call—this method automatically syncs the loggedIn state. If you're using a custom axios request, make sure you're manually triggering this.$auth.setUser(token) or updating the Vuex state correctly once login is confirmed.

• Validate access_token Delivery
  The API accepts access_token via URL params, headers, or request body—confirm you're sending it in the exact format the backend expects. Check the Network tab in Chrome DevTools:

  • If using headers: Ensure the Authorization header is structured correctly (e.g., Bearer YOUR_ACCESS_TOKEN)
  • If using request body: Verify the access_token key is present in the POST payload and spelled correctly
  • If using URL params: Check the request URL includes ?access_token=YOUR_TOKEN
    Even a tiny typo here could lead the backend to ignore the token, resulting in an implicit login failure despite the 201 status code.

• Audit Nuxt Auth Module Configuration
  If you're using @nuxtjs/auth, your nuxt.config.js settings might be misaligned with your backend:

  • Check the redirect section: While redirect issues rarely affect the loggedIn state directly, confirm redirect.home points to a valid route to rule out secondary issues.
  • Verify the strategy configuration: For example, in the local strategy, the token.property should match the exact field name your backend returns (e.g., if the backend sends auth_token instead of access_token, update this value). Also confirm token.storage is set to localStorage or cookie based on your setup.
  • Ensure the @nuxtjs/auth module is properly added to the modules array in nuxt.config.js.

• Check Token Persistence & Auth State Initialization
  After a successful login, confirm the token is actually being stored. Open Chrome DevTools' Application tab, navigate to Local Storage (or Cookies if using cookie storage) and check for the token entry. If it's missing, your frontend isn't saving it correctly. Also, ensure the auth module initializes properly on page load—if the token exists but loggedIn remains false, there might be an issue with how the module reads the stored token.

• Inspect the Full 201 Response Body
  A 201 status code doesn't guarantee a successful login. Check the response body in the Network tab—maybe the backend returns a 201 but includes an error message or empty user data. For example, it might create a placeholder session but reject the credentials, leading to no valid token being issued.

• Review Custom Middleware/Router Guards
  If you've added custom auth middleware or router guards, check for logic that might override the loggedIn state. For example, a middleware that incorrectly sets auth.loggedIn to false after login, or a guard that doesn't properly handle authenticated routes.

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