Vue の BeforeEach ガード ルートで ASync/Await が期待どおりに機能しませんか?

Question

これは私のルーティング ガードです:

リーリー

問題は、ディスパッチ メソッドで await を使用したにもかかわらず、最初は空だったアクセス許可のステータス値を取得できなかったことです。 これは vuex ストアのコードです:

リーリー

この問題の解決を手伝ってください。ありがとう!

Answer 1

Vuex では、操作は非同期です。呼び出し元の関数 (オペレーションの開始者) にオペレーションが完了したことを知らせる唯一の方法は、Promise を返し、後でそれを解決することです。

これは例です: myAction は Promise を返し、http 呼び出しを行い、後で Promise を非同期的に解決または拒否します。

リーリー

}

これで、Vue コンポーネントが myAction を起動すると、この Promise オブジェクトを取得し、それが成功したかどうかを知ることができます。 Vue コンポーネントのサンプル コードを次に示します:

リーリー

}

さらに、一致する権限がない場合に同じルートを呼び出すと、同じルートが呼び出され続け、無限ループが発生します。 アクセス許可が拒否された場合は、アクセス拒否ページにリダイレクトされます。