1.権限管理を実現するには、メニューを動的に生成する必要があります
バックエンドは ["/home","/produce","/abc"]のような現在のログイン アカウントのパスを返し、ルーティングを 2 つのプロセスに分けます
。そして入れます
勝手にアクセスできるログインページ、リダイレクトページはconstantRoutes配下に置く
ログイン時にロールのパーミッションパスを取得してブラウザストレージに保存し、対応するルーティングオブジェクトと照合する
この2枚の写真は私のアルゴリズムと処理方法です
vue-router で router.addRoutes が取り消され、バージョン 3 にいる. ここに落とし穴がある. router.addRoutes() はルーティング オブジェクトの配列を格納し、router.addRoute は何度もトラバースする必要がある ルーティング オブジェクトを追加する、ここで注意する必要があります
2. 更新メニューが消える
vuexは処理のための永続的なストレージを行わないため、保存されたルーティング オブジェクトに対してブラウザー キャッシングを行う必要があるため、ブラウザーが更新され、当然 vuex 内のデータは初期化に戻ります。
メニューバーは正常に表示できます
3. リフレッシュ メニュー バーはあるが、ジャンプが機能しない
その理由は、リフレッシュすると vue-router も初期化されるためです. リフレッシュ後は、インスタンス化したばかりの同期ルートだけが残り、ログインによって追加された動的ルートはなくなるため、リフレッシュするときに別のリクエストを送信する必要があります.ログインと同じで、ここでの私の操作は vue.index で処理を行い、ロールのパスパスを再度取得し、動的追加を行うことです。
\
これで動的ルーティングが完了しました
4.細部に注意を払う
4.1——トークンの判定、ログイン後のみ解放可能、トークンはログイン不可
4.2 ルートを勝手に行く、見つからないコンポーネントを一致させる、空白は見栄えがよくない
4.3 ログアウトするには、vuex とブラウザ ストレージのデータを消去する必要があります。
ここで私が使用した
ここで window.location.reload() を使用すると、ブラウザがリロードされ、しばらくの間白い画面が表示されます