Angular 5中Http.put请求返回"未提供身份验证凭据"错误

Hey there! That error pops up when your backend doesn't see the authentication credentials it needs to let you update the user profile. Let's walk through the most likely fixes based on your Angular component code:

1. Add Authentication Headers to Your PUT Request #

Looking at your editProfile method (which is cut off), the biggest missing piece is probably the authorization header in your PUT call. Most APIs expect a token (like JWT) in the request headers to verify you're allowed to modify this user's data.

Here's how to update your editProfile method to include the necessary headers:

// First, make sure to import HttpClient and HttpHeaders in your component
import { HttpClient, HttpHeaders } from '@angular/common/http';

// ... update your constructor to inject HttpClient
constructor(fb: FormBuilder, public storeSrv: StoreService, private http: HttpClient) { 
  this.editProfileForm = fb.group({ 
    'mobile': [''], 
    'address': [''], 
    'description': [''], 
    'storeUserId': [''], 
  }); 
}

editProfile() {
  this.formSubmitAttempt = true;
  
  if (this.editProfileForm.valid) {
    // Grab your auth token from wherever you're storing it (StoreService, localStorage, etc.)
    const authToken = this.storeSrv.authToken; // Adjust this to match your actual token property
    
    // Create the headers object with the auth token
    const requestHeaders = new HttpHeaders({
      'Authorization': `Bearer ${authToken}`, // Standard format for JWT tokens
      'Content-Type': 'application/json'
    });

    // Send the PUT request with the headers included
    this.http.put('/your-api-endpoint/user-profile', this.editProfileForm.value, { headers: requestHeaders })
      .subscribe({
        next: (successResponse) => {
          console.log('Profile updated!', successResponse);
          // Add your success handling here (e.g., navigate back, show a toast)
        },
        error: (errorResponse) => {
          console.error('Update failed:', errorResponse);
          // Handle errors here
        }
      });
  }
}

2. Confirm Your Auth Token is Valid and Accessible #

• Log the token to your console to make sure it's not null or expired:

  console.log('Current Auth Token:', this.storeSrv.authToken);
  

• If you're using localStorage to store the token instead, retrieve it like this:

  const authToken = localStorage.getItem('userToken');
  

3. Check Backend Authentication Configuration #

While this is backend-side, it's worth verifying:

• Does your PUT profile endpoint require authentication? (It should!)
• Is your backend set up to recognize the header format you're sending? (e.g., Bearer tokens, custom auth headers)
• For example, if using Django REST Framework, ensure TokenAuthentication is enabled and your view uses the IsAuthenticated permission class.

4. Watch for Typos in Header Names/Format #

• Make sure the header key matches exactly what your backend expects (common ones are Authorization, Auth-Token, etc.).
• Don't forget the space after Bearer in the header value: Bearer your-token-here (not Beareryour-token-here).

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