多くの場合、プロジェクトのルーティングはフロントエンドで構成されますが、
包括的な権限制御を実行するために、ルーティングテーブルをバックグラウンドで提供し、フロントエンドをレンダリングする必要がある場合があります。フロントエンドで設定する必要はありません。
以下は主にアイデアについて話します
1.バックグラウンド把我们前端配置的路由表数据给他
で弟とデータを通信し、理解できる
2、拿到数据需要我们自己再处理
ルーティングのcomponent
バックエンドを指定することはできません。ここでは、提供するフロントエンドcomponent
パスに従ってデータを提供するためのバックエンドの弟だけが必要です。ループでロードできます。
//view就是后台给的数据
return () => import(`@/view/modules/${view}`);
このようにして、最も重要なデータであるコンポーネントを取得します。
3.バックグラウンドで提供されたデータを必要なルーティングテーブルに処理します
。4.ルーティングに追加します。
Router.addRoutes(路由数据)
プロジェクトでの私の実装プロセスについての次の話
1.新しいrouter.jsを作成します
データを取得した後も手動でパッケージをルートに配置する必要があるため、パッケージのインポートなどの基本的なルーティング操作があります。
また、テストページやログインなど、バックグラウンドで提供する必要のないメニューデータも書き込みます。
import Vue from "vue";
import Router from "vue-router";
import AppMain from "@/view/modules/main/index";
Vue.use(Router);
export const _CONSTANTS_ROUTERS =
[
{
path: "/login",
component: () => import("@/view/modules/login/index"),
hidden: true
},
{
path: "",
component: AppMain,
redirect: "/dashboard",
children: [
{
path: "/dashboard",
component: () => import("@/view/modules/dashboard/index"),
name: "Dashboard",
meta: { title: "首页", icon: "dashboard", noCache: true }
}
]
}
];
export default new Router({
mode: "history",
// 解决vue框架页面跳转有白色不可追踪色块的bug
scrollBehavior: () => ({ x: 0, y: 0 }),
// scrollBehavior: () => ({ y: 0 }),
routes: _CONSTANTS_ROUTERS
});
基本的なルーティングテーブルが確立されました
2.完全なルーティングテーブルデータを取得するタイミング
現時点では、ルーティングフック関数について考える必要があります。もちろん、Router.beforeEachで行います。
Router.beforeEach((to, from, next) =>
{
NProgress.start();
if (!Token.isEmpty())
{
if (to.path === "/login")
{
next({ path: "/" });
NProgress.done();
}
else if (to.path === "/404")
{
next();
NProgress.done();
}
else
{
// 判断当前用户是否已拉取完角色信息
if (Store.getters.roles.length === 0)
{
//拉取路由数据
ACLRepo.listMenuTreeOfCurrentUser().then(response =>
{
Store.dispatch("generateRoutes", response).then(() =>
{
// 根据roles权限生成可访问的路由表
Router.addRoutes(Store.getters.addRouters); // 动态添加可访问路由表
next({ ...to, replace: true }); // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
});
});
}
else
{
next();
}
}
}
else
{
next();
}
});
3.ルーティングデータの再パッケージ化
generateRoutes
import { _CONSTANTS_ROUTERS } from "@/scripts/router";
import AppMain from "@/view/modules/main/index";
const _PERMISSION = {
state: {
routers: _CONSTANTS_ROUTERS,
addRouters: []
},
mutations: {
setRouters: (state, routers) =>
{
state.addRouters = routers;
//和已经存在的路由表拼接
state.routers = _CONSTANTS_ROUTERS.concat(routers);
}
},
actions: {
generateRoutes({ commit }, response)
{
let asyncRouters = filterAsyncRouter(response);
asyncRouters.push({ path: "*", redirect: "/404", hidden: true });
commit("setRouters", asyncRouters);
}
}
};
function filterAsyncRouter(routers)
{
// 遍历后台传来的路由字符串,转换为组件对象
let accessedRouters = routers.filter(router =>
{
if (router.meta)
{
// 默认图标处理
router.meta.icon = router.meta.icon ? router.meta.icon : "component";
}
if (router.component === "main")
{
// Main组件特殊处理
router.component = AppMain;
}
else
{
//处理组件---重点
router.component = loadView(router.component);
}
//存在子集
if (router.children && router.children.length)
{
router.children = filterAsyncRouter(router.children);
}
return true;
});
return accessedRouters;
}
function loadView(view)
{
// 路由懒加载
return () => import(`@/view/modules/${view}`);
}
export default _PERMISSION;
これは実際にはここで行われ、考え方を明確にします