Node.js と jsonwebtoken バックエンドを使用して Vue.js 認可認証を実装するにはどうすればよいですか?

Question

私は、今後の学生プロジェクトの認証を設定するために vuejs と nodejs を学んでいます。

これを行うために、クリックしてキャラクターの履歴を表示できるキャラクター カードを作成できる API を作成しました。

それはうまく機能していたので、認証部分をハッキングして、ユーザーの作成を許可し、最後のものを jsonwebtoken と連結することができました。バックエンドではすべてが機能しましたが、フロントエンドにいるときは、ユーザーがアクセスしないときに文字にアクセスできます。接続しても動作せず、何も動作しない場合は、私が書いたエラーが返されます。バックエンドがユーザー ID とともに正常にトークンを返すため、接続時にトークンが正常に作成されることを指定したいのですが、文字ページにアクセスしてリクエストのヘッダーを見ると、「認可」が表示されません。 : Hold There is a "token". そして、フロントエンドで文字のリストを取得する以外に何かをすべきかどうかわかりません。

ダウンロードした npm "cors" パッケージに問題があるのではないかと思って、リクエスト ヘッダーのアクセス許可を書き直しましたが、何も機能しませんでした。

axios を使用して文字リストを取得することを指定したいと思います。

ログインリクエストでトークンを取得できますが、それを使用してユーザーが文字にアクセスできるようにする方法がわかりません

これは、仕事にログインして文字リストにリダイレクトするときの不正なエラーです:

バックエンドからの認証ミドルウェアは次のとおりです:

これは認証ミドルウェアを使用した私のルートです:

ここで適切な質問を書く方法について何かを見逃していたら申し訳ありません。私はスタックオーバーフローに慣れていないので、より具体的な情報を提供する必要がある場合は、コメントで知らせてください

＃＃＃読んでくれてありがとう＃＃＃

Answer 1

認証を必要とするすべてのリクエストに Authorization ヘッダーを設定する必要があります。

リクエストにカスタム axios インスタンスを使用する場合、インターセプターを使用して認可ヘッダーを指定できます。例:

リーリー

また、そのようなインスタンスを使用していない場合は、次のように設定することもできます。

リーリー