vue系列之动态路由详解【原创】

狼蚁网站SEO优化长沙网络推广带来一篇关于vue系列之动态路由详解的原创文章。在现今的web开发中，vue框架的使用越来越广泛，动态路由作为其重要特性之一，对于构建复杂的前端应用尤为重要。长沙网络推广认为这篇文章内容很好，想分享给大家，作为参考。

一、引言

近期使用vue构建了一个小项目，该项目以iframe的形式嵌套在其他项目中，因此登录验证面临一些挑战。后端团队针对当前问题提出了解决方案。在此之前，我设想了一个更标准的单系统解决方案。

二、设想

简单解释下，前端从cookie中获取token。若无token则跳转至登录页面进行验证，验证成功后生成token并存入数据库，同时返回前端。前端将token保存至cookie中，以便在新的浏览器tab页中无需再次登录。若用户已有token，则再验证用户信息。若不存在，则请求用户信息接口，后台读取并返回用户基本信息。前端根据后台返回的用户权限生成固定的路由表，用于页面拦截。在用户拥有token和权限的情况下，可进入权限内的页面，并携带token与后台进行交互。用户退出时，请求后台接口清除token数据。

三、项目背景与讨论

由于公司项目复杂，需要在原有系统上开发新的系统模块。这些模块需要保持相对独立性，以便未来的功能更新和迭代。现有项目将逐渐转变为用户中心，而新项目的登录信息需要从该用户中心获取。具体实现方式是：当新项目如b.example检测到session中未登录时，会跳转到a.example并带上returnUrl参数。在a.example成功登录后，会生成一个ticket给到b.example。b.example将ticket存在session中，以保持登录状态。因为用户通常先登录a.example再访问b.example，所以b.example会向a.example发送请求获取ticket，并生成session维持登录状态。

四、实现细节

虽然曾考虑引入vuex并通过cookie保存token状态，但由于目前项目仍使用session维持用户登录状态，故未引入vuex。

五、动态路由详解

在vue中实现动态路由，主要是通过vue-router进行。动态路由允许我们在路径中定义可变的参数，从而实现不同的页面展示。例如，我们可以定义一个用户中心的动态路由，通过传递不同的用户ID来展示不同用户的个人信息。动态路由还可以与前面提到的token和session机制结合，实现用户的权限管理和页面拦截。

六、总结与展望

main.js中对permission.js的引入与改造

我们首先在main.js中引入了permission.js文件，这个文件主要处理路由权限的相关逻辑。

```javascript

import Vue from 'vue';

import router from './router'; // 引入路由配置

// 引入异步路由映射和常量路由映射

import { asyncRouterMap, constantRouterMap } from './router';

// 定义一个函数，用于判断用户是否有权限访问某个路由

function hasPermission(roles, route) {

if (route.meta && route.meta.role) {

return roles.some(role => role === route.meta.role);

} else {

return true; // 如果没有指定角色，则默认允许访问

}

}

// 过滤异步路由，根据用户角色返回可访问的路由列表

function filterAsyncRouter(asyncRouterMap, roles) {

const accessibleRouters = asyncRouterMap.filter(route => {

if (hasPermission(roles, route)) {

if (route.children && route.children.length) {

route.children = filterAsyncRouter(route.children, roles); // 递归过滤子路由

}

return true; // 返回可访问的路由

}

return false; // 返回不可访问的路由

});

return accessibleRouters;

}

// 在加载页面之前，进行权限检查

router.beforeEach((to, from, next) => {

NProgress.start(); // 启动进度条

if (to.path === '/ContractAduit/Error') { // 如果是错误页面，直接跳转

next();

} else if (!Vue.prototype.hasRoute) { // 如果未拉取用户信息，则进行用户信息拉取和权限验证

Vue.prototype.$ajax.get(Vue.prototype.$api.getModuleHost("用户信息接口地址"), {})

.then(data => {

if (data.code === 1000) { // 如果用户信息获取成功

let menus = data.menu; // 获取菜单列表

let roles = menus.map(menu => parseInt(menu.url)); // 提取用户角色列表

const accessibleRouters = filterAsyncRouter(asyncRouterMap, roles); // 根据角色过滤可访问的路由

router.addRoutes(accessibleRouters); // 动态添加路由

Vue.prototype.userInfo = { id: data.id, realname: data.realname }; // 保存用户信息

Vue.prototype.hasRoute = true; // 设置已拉取用户信息标志位

next({ ...to }); // 跳转到目标页面

} else { // 如果用户信息获取失败，跳转到错误页面

router.push({ name: 'ErrorPageRouter' });

}

})

.catch(err => console.log(err)); // 错误处理

} else { // 如果已经拉取过用户信息，直接跳转

next();

}

});

```

route.js文件的解读

在route.js文件中，我们首先定义了常量路由和异步路由的映射关系。由于后端是按照页面级别进行权限配置，我们在路由的meta字段中通过role属性来标识不同页面的访问权限。这样，我们就可以在前端通过判断用户的角色和路由的role属性来确定用户是否有权限访问该页面。如果没有引入vuex，我们需要在Vue构造函数的原型对象上声明变量来保存用户信息和已经拉取用户信息的标志位。这样，在路由守卫中就可以通过这些变量来进行权限验证和用户信息的拉取。下面是route.js的部分代码：

```javascript

import Vue from 'vue';

import Router from 'vue-router';