How to send a header to a MERN api

Viewed 9

I am creating a MERN application and I have a problem, in the back end I have the protected routes through a function called verifytoken that looks for the token as a header, on the other hand, in the front I receive a token that I keep in the local storage, how can I send the local storage as a header when calling that API?

I attach my code

frontend function that receives the token and stores it in localstorage

`import axios from "axios";

const jwtString = 'jwtlibraryyt'

export const loginUser = async (userObj) => {
  const response = await axios.post(`http://localhost:3001/login`, userObj);
  const { user, token} = response.data;
  const {_id, ...userStored} = user;
  localStorage.setItem(jwtString, token );
  return response;
}`

frontend function that tries to call the protected route and send the local storage as a header

`const Books=()=> {
    const [books, setBooks] = useState([]);
    useEffect(() => {
      getBooks();
    },[])
    async function getBooks(){
      if(!localStorage.getItem("jwtlibraryyt")){

      }
      else{
        const response = await axios.get('http://localhost:3001/books',{ headers: { token:localStorage.getItem('jwtlibraryyt') }});
        setBooks(response.data);
      }
      
     
    }`

protected backend path

`router.get('/books', UserController.verifyToken,BookController.allBooks)`

verifytoken function found in the backend

`UserMethods.verifyToken = async (req, res, next) => {
  let token = req.headers["token"];

  if (!token) return res.status(403).json({ message: "Dame un token" });

  try {
    const decoded = jwt.verify(token, SECRET='elbicho');
    req.currentUserId = decoded._id;
    const user = await Users.findById(req.currentUserId, { password: 0 });
    if (!user) return res.status(404).json({ message: "No se encontro el usuario" });

    next();
  } catch (error) {
    return res.status(401).json({ message: "Usted no tiene autorizacion" });
  }
};`

0 Answers
Related