Node.js 및 jsonwebtoken 백엔드를 사용하여 Vue.js 인증 인증을 구현하는 방법은 무엇입니까?

Question

저는 다가오는 학생 프로젝트에 대한 인증을 설정하기 위해 vuejs와 nodejs를 배우고 있습니다.

이를 위해 클릭하면 캐릭터의 이력을 볼 수 있는 캐릭터 카드를 생성할 수 있는 API를 만들었습니다.

잘 작동해서 인증 부분을 해킹하여 사용자 생성을 허용하고 마지막 부분을 jsonwebtoken으로 연결했는데 모든 것이 백엔드에서 작동했지만 프런트엔드에서는 사용자가 연결할 때 문자에 액세스할 수 없습니다. 아무것도 작동하지 않으면 내가 쓴 오류를 반환합니다. 연결하면 백엔드에서 사용자 ID로 토큰을 잘 반환하기 때문에 토큰이 잘 생성되도록 지정하고 싶은데, 캐릭터 페이지에 가서 요청 헤더를 보면 "Authorization" 항목이 보이지 않습니다. : 보류 "토큰"이 있는데 프런트 엔드에서 문자 목록을 검색하는 것 외에 다른 작업을 수행해야 하는지 모르겠습니다

문제가 npm "cors" 패키지에서 발생한 것이 아닌지 궁금해서 다운로드하고 요청 헤더에 권한을 다시 썼지만 아무것도 작동하지 않았습니다.

캐릭터 목록을 가져오기 위해 axios를 사용하도록 지정하고 싶습니다.

로그인 요청에서 토큰을 얻을 수 있지만 이를 사용하여 사용자가 캐릭터에 액세스하도록 허용하는 방법을 모르겠습니다

작업에 로그인하고 문자 목록으로 리디렉션할 때 발생하는 무단 오류입니다.

백엔드의 인증 미들웨어는 다음과 같습니다.

인증 미들웨어를 사용하는 경로는 다음과 같습니다.

여기서 좋은 질문을 작성하는 방법을 놓쳤다면 죄송합니다. 저는 스택오버플로에 익숙하지 않으니, 더 구체적인 정보가 필요하다면 댓글로 알려주세요

읽어주셔서 감사합니다

Answer 1

인증이 필요한 모든 요청에 ​​대해 Authorization 헤더를 설정해야 합니다.

요청에 사용자 정의 axios 인스턴스를 사용하는 경우 인터셉터를 사용하여 인증 헤더를 지정할 수 있습니다. 예:

으아악

또는 이러한 인스턴스를 사용하지 않는 경우 다음과 같이 설정할 수 있습니다.

으아악