免責事項：この記事は再現CC BY-SA 4.0の著作権契約を、従って、ブロガーオリジナル記事です、元のソースのリンクと、この文を添付してください。
このリンクします。https：//blog.csdn.net/qq_31906983/article/details/89054798
仕事は、私たちはしばしば舞台裏ユーザー権限のデータ収集フロントエンドを定義して、サイドバーナビゲーションにレンダリング、この需要が発生しましたユーザー別の権限は、サイドバーが異なって表示されます。すなわち、フロントエンドは、データの変化としてレンダリングされる前部及び後部が真に分離終了、変更されます。
まず、動的なルーティングテーブルが追加する必要があります
私たちのアイデアを、次のとおりです。
ログイン（ログイン、誰もがそれを見ることができます）--------->ログインに成功し、アクセス権限-------->異なる権利、異なるデータを表示するサイドバー
こうしたログインとして、内部だけでいくつかのパブリックルート、共通のルーティングテーブルを定義します。
許可を取得した後、当局によると、我々はダイナミックルーティングテーブルを追加する必要が与える、このルータを追加するダイナミック・ルーティング・テーブルをすることができます。
オンライン情報、フォーラムへのアクセスによって、私はすなわち、フロントエンドとバックエンドのリードをリードし、二つの方法をまとめました。
（1）フロントを支配
支配的なフロントエンドとは何ですか？これは、全体の権限の面で、本体は、フロントエンドで定義されています。完全なフロントエンド事前許可ルーティングテーブルの定義は、背景の役割は、だけにして、テーブルの上にフルアクセス権よりも、テーブルに許可を得る新しいルーティングテーブルテイク許可レンダリングを取得するには、現在のユーザーの権限のリストを返します。
なぜではなく、許可テーブルに到着する前に比較することによって、レンダリング、それを取り戻す権限のリストに直接戻らないことに留意すべきですか？
戻ったばかりの文字列を返したため！
我々はVUE-ルータルート定義を使用すると、ルートに対応するコンポーネントをインポートする必要がある示すように、コンポーネントを導入することで、背景データは、私たちに返される対応する部品の組立になりません。
インポート「./views/Login.vue」からログイン
LET publicRoutesの= [
{
パス： 『/ログイン』、
名前： 『ログイン』、
コンポーネント：ログイン
}
]
したがって、我々は、完全によって、先に全てのフロントエンドを定義することができルーティングテーブル、参照データは、ルート許可テーブルに到達するために使用されるバックステージパス。
例えば：
完全な権限テーブルの定義のフロントエンドには：
「./components/orderCompontents/order.vue」からの輸入注文
「./components/orderCompontents/orderList.vue」からの輸入オーダーリスト
「./components/orderCompontents/productManage.vue」からインポートProductManage
輸入ProductionList ./components/「からorderCompontents / productionList.vue '
' ./components/orderCompontents/reviewManage.vueからインポートReviewManage'
./components/orderCompontents/returnGoods.vueからインポートReturnGoods '
CONST allroutes = [
{
パス： '/注文'、
タイトル：'順序-manage '
成分：オーダー、
メタ：{
名： '订单管理'
}、
子供：[
{
パス： '/順序リスト'、
タイトル：'オーダーリスト」、
コンポーネント：オーダーリスト、
メタ：{
名： '注文一覧'
}
}、
{
パス： '/製品'、
タイトル： 'ProductManage'、
コンポーネント：ProductManage、
メタ：{
名： '生産管理'
}、
子供：[
{
パス' /製品リスト'
タイトル：'製品リスト'
コンポーネント：ProductionList、
メタ：{
名：'生産リスト'
}
}、
{
パス：' /レビュー-管理'
タイトル：'レビュー・管理」、
コンポーネント： ReviewManage、
メタ：{
名： '管理監査'
}
}
]
}、
{
パス： '/リターン製品'、
タイトル：」-財返し
、ReturnGoods：コンポーネントを
メタ：{
名：「戻る管理」
}
}
]
}
]
によって送信されたデータの背景：
{
"コード"：0、
"メッセージ"： "アクセス許可の成功の取得"、
"データ"：[
{
"名前"： "注文管理"、
"子供"：[
{
"名前"： "注文一覧"
}、
{
"名前「：」生産管理」、
『子供『：[
{
』名前『：』生産リスト』
}
]
}、
{
『名『：』を返し管理』
}
]
}
]
}
我々は2つの名前のデータの性質を比較して、それは、簡単にルート許可テーブルをフィルタリングすることができます。次いでrouter.addRoutesを通じて（）動的経路に加えることができます。
（2）支配的な背景
シンプルな、明確に定義されたフロントエンド、バックエンドの前の一つの方法は、比較のために上を通過することができますが、欠点も明らかです。機関名のバックグラウンド転送はわずかいくつかの変更を行うことがあれば、フロントには、対応するルーティングとは一致しません。それは一緒にフロント背景を変更する必要があると、名前を変更するための特権です。。思考の完全な分離の前後端部に沿って少し少ないです。私たちは、単に背景を変更されたい場合、フロントエンドは自動的に受信したデータに基づいて変更されます！ハッハッハ、どのようにこの問題を解決するには？それは支配的なイデオロギーと背景です。
次のようにアイデアは以下のとおりです。
比較のためのルーティングテーブルは、フロントエンドではないが、比較のため、ユーザーの権限の背景には、ルーティングテーブルが良いのルーティングテーブルよりも、フロントエンドに戻り、次のフィールドに戻ってきたする必要がありますされています。
{
"データ"：{
"ルーター"：[
{
"パス"： ""、
"リダイレクト"： "/ホーム"を、
}、
{
"パス"： "/ホーム"、
"コンポーネント"、 "自宅"、
「名前「： "ホーム"、
"メタ"：{
"タイトル"： "首页"、
"アイコン"： "例"
}、
"子供"：[
{
"パス"： "/ xitong"、
"名"： "xitong" 、
"成分"： "xitong / xitong"、
"メタ"：{
"タイトル"： "系统"、
"アイコン"： "テーブル"
}
}
]
}、
{
"パス"： "*"、
"リダイレクト"： "/ 404"、
"非表示"：真
}
]
}
}
コンポーネント分野の一つは、彼は文字列、我々が定義された当社のフロントエンドコンポーネントにこれを配置する必要があり、文字列であることに注意してください！
関数filterRouter（ルータ）は{//送信経路列をバック反復、コンポーネントオブジェクトに変換され
CONST = accessedRouters routers.filter（ルート=> {
{（route.component IF）
（route.component === 'ホーム' IF ）{//ホーム特別な取扱いアセンブリ
route.component =ホーム
}他{
route.component = _import（route.component）
}
}
IF（route.children && route.children.length）{
route.children = filterRouter（route.children ）
}
trueに戻り
}）
戻りaccessedRouters
}
この関数の主要な役割は、実数成分に文字列の背景成分上を通過することです
次のように_import（）関数を定義することです。
_import機能（ファイル）{
リターン（）=>インポート（ '@ /コンポーネント/ビュー/' + +ファイル'.vue'）
}
非同期ローディングアセンブリ、要求に対する成分
私たちは、自分のファイルに応じてパスを変更する必要があるパス。
この方法では、最も重要なことは、コンポーネントは、舞台裏のパスの実際のストレージに合格されています！非同期的にロードされた部品やアセンブリを見つけるために、このパスのフロントエンドによります。
最終の実行後、filterRouterリターン経路は成分も引用されている権限のリストです。
このアプローチの利点は、すべての権利がある限り、パスが変更されないように、背景の前端からデータをルーティングしている、背のデータを変更することができ、フロントエンドが自動的に変化することです。
第二に、サイドバーに描画データ
（a）は、我々は、ルーティングテーブルをレンダリングする方法を得ることができることでは、私は、サイドバーのページをレンダリングする、そしてアウト、中vuexしておきます。
----------------
免責事項：この記事は、元の記事の「記事ヤンの」CSDNブロガーで、著作権の契約は、再現し、元のソースのリンクを添付してくださいBY-SA CC 4.0に従ってくださいそしてこの文。
オリジナルリンクします。https：//blog.csdn.net/qq_31906983/article/details/89054798