Vue動的生成Router

Vueルーティングの紹介
Vue RouterはVueです.js公式のルーティングマネージャ.Vueとjsのコア深度集積は,単一ページアプリケーションの構築を手のひらのように容易にし,一般的にページのサイドルーティングに直感的に現れ,RBACモデルに従って異なるユーザのために動的に異なるルーティング構成を生成する.
実現構想.

ユーザがログインしてリソースデータを取得し、現在のメニュー情報とコンポーネント情報の取得を要求するサービス側に要求し、サービス側は現在のユーザが備えるロール、およびロールに対応するリソースに基づいてjson文字列を返す.

バックエンドは、json文を取得します.すなわち、ユーザテーブル、ロールテーブル、リソーステーブル、ユーザロール中間テーブル、ロールリソース中間テーブルから、ユーザがアクセスできるリソースを取得します.

   r1.`id`,
   r1.`name`,
   r1.`code`,
   r1.`url`,
   r1.`open_img`,
   r1.`status`,
   r2.`name` AS name2,
   r2.`code` AS code2,
   r2.`url` AS url2,
   r2.`open_img` AS open_img2,
   r2.`status` AS status2

< select id=“getResourcesByUserId” resultMap=“ResourcesMap”> SELECT FROM t_resource r1, t_resource r2 WHERE r1. id =r2. parent_id AND r1. id !=1 and r2. id in(SELECT rr. resource_id FROM t_user_role_relationship ur,t_role_resource_relationship rr WHERE ur. role_id =rr. role_id and ur. user_id =#{userId}) and r2. status =1 ORDER BY r1. id ,r2. id

ルーティングナビゲーションガードは、storeにroutes配列を作成します.これは空の配列です.その後、ルーティンググローバルガードを開き、返されたデータをstoreに配置します.ログインページでない場合はstoreから現在のログイン状態を取得し、ログインしていない場合はルーティング中のmeta属性のrequireAuth属性で行きたいページにログインする必要があるかどうかを判断し、ログインが必要な場合はログインページにジャンプし、同時に行きたいページのpathをパラメータとしてログインページに転送し、ログインに成功した後にターゲットページにジャンプするようにします.ログインが必要ない場合は、ジャンプします.

ユーザが他のページにアクセスするときのデータ取得

.
//フック関数を使用してルーティングを権限ジャンプrouter.beforeEach((to,from,next)=>{console.log("アクセスパス"+to.path)if(to.path='/login'){next();return;}const role = localStorage.getItem(‘ms_username’); if(!role&&to.path!='/login'){console.log(「ログイン」);next('/login');}Else if(to.meta.permission){//管理者権限であればアクセス可能であり、ここでは単純なシミュレーション管理者権限にすぎないrole==‘admin’?next():next(’/403’);}Else{console.log("メニューバーを取得");initMenu(router,store);next();})

フロントエンドの具体的な呼び出し方法は以下の通りである:初期化メニューでは、まずstore中のデータが存在するか否かを判断し、存在する場合、ユーザがF 5またはアドレスバーに直接アドレスを入力して入るのではなく、今回のジャンプが正常なジャンプであることを示す.そうでなければメニューをロードします.メニューを手に入れた後、まずformatRoutesメソッドでサーバから返されるjsonをrouterに必要なフォーマットに変換します.ここでは主にcomponentを回転します.サービス側から返されるcomponentは文字列ですが、routerに必要なのはコンポーネントです.formatRoutesメソッドで必要なコンポーネントを動的にロードすればいいです.データフォーマットの準備に成功した後、storeにデータを格納する一方で、ルーティングのaddRoutesメソッドを使用してルーティングに動的に追加します.

export const initMenu=(router,store)=>{//リソース情報がすでに含まれている場合はif(store.state.routes.length>0){return;}をロードしません.getRequest("/config/sysmenu").then(resp=>{if(resp&&resp.status==200){console.log(resp.data);var fmtRoutes=formatRoutes(resp.data);router.addRoutes(fmtRoutes);//storeにcomponent情報をstore.commit(‘initMenu’,fmtRoutes);})}export const formatRoutes = (routes)=> { let fmRoutes = []; routes.forEach(router=> { let { url, code, name, status, openImg, children } = router; if (children && children instanceof Array) { children = formatRoutes(children); } let fmRouter = { path: code, component:resolve =>{ if (component.startsWith(“Home”)) { require([’…/components/common/’+ code +’.vue’], resolve) } else if (component.startsWith(“Base”)) { require([’…/views/basedata/’+ code +’.vue’], resolve) } else if (component.startsWith(“Sys”)) { require([’…/views/system/’+ code +’.vue’], resolve) } else if (component.startsWith(“Exam”)) { require([’…/views/exam/’+ code +’.vue’], resolve) } else if (component.startsWith(“Paper”)) { require([’…/views/paper/’+ code +’.vue’], resolve) } }, name: name, openImg: openImg, status: status, children: children }; fmRoutes.push(fmRouter); }) return fmRoutes; }

最後に表示するメニューページでレンダリング:

    
      
      {{child.name}}