修复动态导入组件问题
修复刷新 404 的 bug
优化流程,简化逻辑,去除_import.js 文件,改为直接动态导入
优化 404 页面
更新为最新的 vue-element-template 的模板
增加思路说明
优化部分代码
增加 QQ 交流群,有问题请加群
在今年年初在掘金发布了一篇文章记一次 Vue 动态渲染路由的实现,现在代码经过不断的 Review
现在完全优化了之前的实现方法,代码量减少很多,逻辑更加简单,同时也更加稳定
demo 已经部署到 github,欢迎体验~~ vue-element-asyncLogin, 你的 start 是我的动力!
前端路由鉴权相信只要了解过vue-element-admin的都知道,前端鉴权方案是完全可行的,思路清晰,难度适中,项目中完全可以使用,那么相对来说动态路由优势在什么地方呢
- 前端鉴权不够灵活,线上版本每次修改权限页面,都需要重新打包项目
- 中小型项目中
前端鉴权明显更加好用,成本更低,程序员们也不用 996 了(雾),但是对于权限等级很多,并且比较大的项目,维护这一套鉴权路由,毫无疑问是一个大工程,并且面对频繁变更的需求,bug 会出现的更加频繁,前端工程师工作量大大增加,这时候似乎前端鉴权就不再是好的方案 - 动态路由并不是回归到刀耕火种的时代,而是一种新的思路,路由配置还是由前端完成,仅仅将状态交给了后端,不同角色的路由显示交给后端控制,前端不需要管理路由,最多只需要管理权限颗粒化的问题
- 路由跳转 先判断是否登录 未登录只能访问白名单页面,访问其他页面全部重定向到登录页面
- 登录行为触发,获取动态路由,递归解析动态路由信息,并且 addRouter,同时存储到 Vuex,并且记录获取路由的状态
- 跳转页面不会获取动态路由,刷新页面重新获取动态路由
相比较之前使用 localStorage 存储登录状态,现在把登录状态交给 cookice 进行管理
路由信息全部交给 Vuex 进行管理,不再从 localStorage 里面走,增加了系统的稳定性
配置基础路由
具体的实现思路
router/router.js
// ......
// 静态路由
export const StaticRouterMap = [
{
path: "/login",
component: login,
meta: { title: "管理员登录" },
hidden: true
},
{
path: "/user",
component: userLogin,
redirect: "/user/userlogin",
name: "user",
hidden: true,
children: [
{
path: "userLogin",
component: () => import("@/views/userLogin/components/login"),
meta: { title: "商户登录" }
},
{
path: "userRegistry",
component: () => import("@/views/userLogin/components/registry"),
meta: { title: "商户注册" }
}
]
},
{
path: "/",
component: Layout,
redirect: "/dashboard",
name: "dashboard",
children: [
{
path: "dashboard",
component: () => import("@/views/dashboard/index"),
meta: { title: "根目录", icon: "dashboard", affix: true }
}
]
},
{
path: "/404",
component: () => import("@/views/404"),
hidden: true
}
];
export default new Router({
mode: "history",
scrollBehavior: () => ({ y: 0 }),
routes: StaticRouterMap
});与后端同学定制路由结构 (以下为 json)
后端会根据当前用户权限动态返回路由结构 前端不再需要考虑权限问题
[
{
"id": 1,
"name": "Example",
"code": null,
"description": null,
"url": "/example",
"component": "layout",
"generatemenu": 1,
"sort": 0,
"parentId": null,
"permName": null,
"redirect": "/example/table",
"title": "普通用户",
"icon": "example",
"children": [
{
"id": 2,
"name": "Table",
"code": null,
"description": null,
"url": "table",
"component": "table",
"generatemenu": 1,
"sort": 0,
"parentId": 1,
"permName": null,
"redirect": "",
"title": "Table",
"icon": "table",
"children": null
},
{
"id": 3,
"name": "Tree",
"code": null,
"description": null,
"url": "tree",
"component": "tree",
"generatemenu": 1,
"sort": 0,
"parentId": 1,
"permName": null,
"redirect": "",
"title": "Tree",
"icon": "tree",
"children": null
}
]
}
]处理后端原始路由数据
../utils/addRouter
递归写入比之前版本的递归删除更加稳定,代码量也更少
注意,路由结构与目录结构是对应的
/**
* 生成路由
* @param {Array} routerlist 格式化路由
* @returns
*/
export function addRouter(routerlist) {
const router = [];
try {
routerlist.forEach(e => {
let e_new = {
path: e.url,
name: e.name,
component: () =>
e.component === "layout"
? import("@/layout")
: import(`@/views/${e.component}/index`)
};
if (e.children) {
const children = addRouter(e.children);
// 保存权限
e_new = { ...e_new, children: children };
}
if (e.redirect) {
e_new = { ...e_new, redirect: e.redirect };
}
if (e.generatemenu === 0) {
e_new = { ...e_new, hidden: true };
}
if (e.icon !== "" && e.title !== "") {
e_new = { ...e_new, meta: { title: e.title, icon: e.icon } };
} else if (e.title !== "" && e.icon === "") {
e_new = { ...e_new, meta: { title: e.title } };
}
router.push(e_new);
});
} catch (error) {
console.error(error);
return [];
}
return router;
}处理后的路由
我们处理后的路由后面需要与现有的 router 进行拼接,这里需要根据需求 修改处理路由的规则
以上的都是准备工作,就是为了将初始路由与后端返回的动态路由进行拼接
这部分代码也是优化的核心
import router from "./router";
import store from "./store";
import user from "./store/modules/user";
import { getToken, removeToken } from "./utils/auth";
import NProgress from "nprogress"; // Progress 进度条
import "nprogress/nprogress.css"; // Progress 进度条样式
import { Message } from "element-ui";
import { getRouter } from "./api/login";
import { addRouter } from "./utils/addRouter";
const whiteList = ["/login"];
router.beforeEach((to, from, next) => {
NProgress.start();
if (getToken()) {
// 判断cookice是否存在 不存在即为未登录
if (to.path !== "/login") {
if (user.state.init) {
// 获取了动态路由 data一定true,就无需再次请求 直接放行
next();
} else {
// data为false,一定没有获取动态路由,就跳转到获取动态路由的方法
gotoRouter(to, next);
}
} else {
Message({ message: "您已经登录", type: "info" });
next("/");
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
// 免登陆白名单 直接进入
next();
} else {
if (to.path !== "/login") {
// 重定向到登录页面 不能这么写 因为假如之前的角色是 管理员页面 后又登陆了非管理员 重定向的页面就可能不存在,就会导致404
// next(`/login?redirect=${to.path}`)
next("/login");
} else {
next();
}
}
}
});
router.afterEach((to, from) => {
NProgress.done(); // 结束Progress
});
function gotoRouter(to, next) {
getRouter(store.getters.token) // 获取动态路由的方法
.then(res => {
console.log("解析后端动态路由", res);
const asyncRouter = addRouter(res.data.router); // 进行递归解析
store.dispatch("user/setroles", res.data.permit);
return asyncRouter;
})
.then(asyncRouter => {
router.addRoutes(asyncRouter); // vue-router提供的addRouter方法进行路由拼接
console.log(asyncRouter);
store.dispatch("user/setRouterList", asyncRouter); // 存储到vuex
store.dispatch("user/GetInfo");
store.commit("user/set_init", true);
next({ ...to, replace: true }); // hack方法 确保addRoutes已完成
})
.catch(e => {
console.log(e);
removeToken();
});
}Vuex 内部的逻辑
import { StaticRouterMap } from '../../router/index'
state: {
//.....
RouterList: [] // 动态路由
},
mutations: {
set_router: (state, RouterList) => {
state.RouterList = RouterList
}
},
action: {
// 动态设置路由 此为设置设置途径
setRouterList({ commit }, routerList) {
commit('set_router', StaticRouterMap.concat(routerList)) // 进行路由拼接并存储
},
}相对之前的逻辑要简单很多
需要注意的是 通过 addRoutes 合并的路由 不会被this.$router.options.routes获取到,所以需要将获取的路由拼接到this.$router.options.routes上
最后修改渲染侧边栏部分部分的代码
src\views\layout\components\Sidebar\index.vue
computed: {
// ....
routes() {
return this.$store.getters.routerList
},
// ....
}我已精心准备了一个简单的 demo vue-element-asyncLogin,欢迎体验,如果对你有帮助,请不要吝啬你的 start~~1