MEAN Stack博客点赞功能报错：No token provided求助

Hey there! Let's troubleshoot why your like button is throwing that "No token provided" error, even though your Postman tests for the backend API work perfectly. Here are the most common issues and how to fix them:

1. Your Frontend Request Isn't Sending the Token #

Postman works because you're manually adding the authentication token to the request headers, but your Angular code isn't doing the same. Let's check your service and component code:

Check product.service.ts #

Make sure your likeProduct method includes the Authorization header with the Bearer token. For example:

likeProduct(productId: number): Observable<any> {
  // Grab the token from where you stored it (localStorage, auth service, etc.)
  const authToken = localStorage.getItem('userToken');
  
  // Set up the headers with the token
  const headers = new HttpHeaders({
    'Authorization': `Bearer ${authToken}`
  });

  // Send the POST request with the headers
  return this.http.post(`/api/products/${productId}/like`, {}, { headers });
}

Check product.component.ts #

Ensure you're not missing any steps to retrieve or pass the token. If your service handles token retrieval (like the example above), just calling the service method should work:

likeProduct(productId: number) {
  this.productService.likeProduct(productId).subscribe({
    next: (response) => {
      // Handle successful like
      console.log('Product liked!', response);
    },
    error: (err) => {
      // Handle error
      console.error('Like failed:', err);
    }
  });
}

2. Token Storage or Retrieval is Broken #

Double-check that your app is actually storing the user's token after login. Add a quick console.log to verify the token exists when the like button is clicked:

// In product.component.ts's likeProduct method
const token = localStorage.getItem('userToken');
console.log('Current token:', token); // Should show a valid token string, not null/undefined

If the token is missing, fix your login flow to properly store the token (e.g., in localStorage or an authentication service) after the user logs in.

3. Backend Token Validation Expectations #

Even though Postman works, confirm your backend's token validation logic matches what your frontend is sending. For example, in your producten.js route:

// Example authentication middleware in producten.js
const jwt = require('jsonwebtoken');

function verifyToken(req, res, next) {
  const authHeader = req.headers.authorization;
  
  // Make sure the header uses the "Bearer <token>" format
  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return res.status(401).send('No token provided');
  }
  
  const token = authHeader.split(' ')[1]; // Extract the token part after "Bearer"
  
  jwt.verify(token, process.env.JWT_SECRET, (err, decoded) => {
    if (err) return res.status(403).send('Invalid token');
    req.user = decoded;
    next();
  });
}

// Apply the middleware to your like route
router.post('/products/:id/like', verifyToken, (req, res) => {
  // Your like logic here
  res.status(200).send('Product liked successfully');
});

Ensure your frontend is sending the token in the exact format your backend expects (with the Bearer prefix, in this case).

4. Quick Cross-Check #

• Clear your browser's local storage and log in again to get a fresh token—sometimes stale tokens cause issues.
• Verify that the API endpoint your frontend is calling matches exactly what you tested in Postman (no typos in the URL).

Start with checking if the token is actually being sent in the request headers (you can use your browser's DevTools > Network tab to inspect the like request's headers). That's usually the root cause here!

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