改动代码片段 + 注释说明
import {list as getRoutes} from ‘@/api/admin/menu’
import Layout from ‘@/layout’
generateRoutes({commit}, roles) {
return new Promise(resolve => {
// 请求后台数据替换src/router/index.js的asyncRoutes异步路由
getRoutes({mode: 3}).then(response => {
// filterAsyncRoutes方法作权限过滤和数据转换，roles为登录用户角色ID集合，如：[1,2]
let accessedRoutes = filterAsyncRoutes(response.data, roles)
commit(‘SET_ROUTES’, accessedRoutes)
resolve(accessedRoutes)
})
})
}
// 递归权限过滤和数据转换
export function filterAsyncRoutes(routes, roles) {
const res = []
routes.forEach(route => {
const tmp = {…route}
if (hasPermission(roles, tmp)) {
const component = tmp.component
if (route.component) {
if (component == ‘Layout’) {
tmp.component = Layout
} else {
// 接口组件字符串转换成组件对象
tmp.component = (resolve) => require([@/views/${component}], resolve)
}
if (tmp.children) {
tmp.children = filterAsyncRoutes(tmp.children, roles)
}
}
res.push(tmp)
}
})
return res
}
三. 后端接口
- 接口数据分析
接下来通过后台接口替换配置在src/router/index.js文件中asyncRoutes异步路由。
まず、非同期ルーティングのデータ構造を分析します。
上の図の非同期ルーティングデータを観察して理解すると、次のポイントが得られます。
パスの
サブルートの前にバックスラッシュはありません。ルートメニューのAlwaysShowはtrueです。
コンポーネントコンポーネントは、インポート中にコンパイル中にインポートする必要があります。インターフェイスはコンポーネントパス文字列のみを返すことができるため、インターフェイスリクエストの完了後にコンポーネントパスが必要です。文字列からコンポーネントオブジェクトへの変換プロセス
におけるメタのロール属性は、ルーティングアクセス許可を持つ一意に識別されたロールのコレクションに対応します。ここでは、ロールID
2 を使用しています。インターフェイスの実装
は上記のデータ分析を完了し、次のステップはインターフェイスの特定の実装ですはい、youlai-mallをクリックしてSQLと完全なコードを取得してください。キーコードと分析のみが以下に掲載されています。
SysMenuMapper
アクセス許可に対応するメニューリストとロールIDのセットを取得する
SysMenuServiceImpl
メニューをルートに変換し、親子構造ツリーを再帰的に生成します
SysMenuController
RESTは外部インターフェースを提供します
- インターフェーステスト
インターフェーステストツールhttp：// localhost：9999 / youlai-admin / menus？mode = 3を使用してテストします。ここからはゲートウェイ経由でアクセスします詳細については、youlai-mallプロジェクトがあることを確認してください。
データ全体を返して、asyncRoutesのデータ形式と一致するかどうかを確認します。
{ 「コード」：「00000」、「データ」：[{ 「パス」：「/ admin」、「コンポーネント」：「レイアウト」、「alwaysShow」：true、「名前」：「システム管理」、「メタ」 ：{ 「タイトル」：「システム管理」、「アイコン」：「ドキュメント」、「役割」：[2、1] }、「子」：[{ 「パス」：「ユーザー」、「コンポーネント」：「admin / user "、" alwaysShow "：false、" name "："ユーザー管理 "、"メタ "：{ "タイトル "："ユーザー管理 "、"アイコン "："ユーザー "、"役割 "：[1] } } 、{ 「パス」：「ロール」、「コンポーネント」：「admin / role」、「alwaysShow」：false、「名前」：「ロール管理」、「メタ」：{ 「タイトル」：「ロール管理」、
“icon”: “peoples”,
“roles”: [2, 1]
}
}, {
“path”: “dept”,
“component”: “admin/dept”,
“alwaysShow”: false,
“name”: “部门管理”,
“meta”: {
“title”: “部门管理”,
“icon”: “tree”,
“roles”: [1, 2]
}
}, {
“path”: “menu”,
“component”: “admin/menu”,
“alwaysShow”: false,
“name”: “菜单管理”,
“meta”: {
“title”: “菜单管理”,
“icon”: “tree-table”,
“roles”: [1, 2]
}
}, {
“path”: “dict”,
“component”: “admin/dict”,
“alwaysShow”: false,
“name”: “字典管理”,
“meta”: {
“title”: “字典管理”,
“icon”: “education”,
“roles”: [1, 2]
}
}]
}],
“msg”: “一切ok”
}
最后要做的就是将组件(component)路径字符串转换成组件对象即可，再次贴出在上文permission.js改造的代码：
if (component == ‘Layout’) {
tmp.component = Layout
} else {
// 接口组件字符串转换成组件对象
tmp.component = (resolve) => require([@/views/${component}], resolve)
}
有一点需要注意的是上面组件动态导入不能使用import，如下:
tmp.component = () => import(@/views/${component})
不然会报以下错误
Error: Cannot find module ‘@/views/***’
原因是webpack不支持import动态导入了，但是之前确实是可以的，所以有些让人想不通，这里使用require动态导入组件即可。
亚马逊测评 www.yisuping.com