Vue + ElementUI 实现后台管理系统模板 -- 前端篇（八）：引入 vue-router 进行路由管理、模块化封装 axios 请求(2)

分享

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

（3）路由元信息

定义路由规则时，可以通过 meta 指定路由的元信息。

通过 router对象.meta 可以获取到某个 router对象 的 meta 信息，并根据其进行处理。

const router = new VueRouter({

routes: [

{

  path: '/foo',

  component: Foo,

  children: \[

    {

      path: 'bar',

      component: Bar,

      meta: { requiresAuth: true }

    }

  \]

}

]

})

（4）项目中使用

进入主页面后，当 token 过期或不存在时，需要跳转到登录页面重新登录。

使用 导航守卫，每次路由跳转前，确定 token 是否存在。可以使用 beforeEach 定义全局守卫，也可以使用 beforeEnter 为某个路由定义独有守卫。

此处演示使用 beforeEach 定义全局守卫。

Step1：

修改 Login.vue 登录逻辑，保存 token 值。

之前将 cookie 相关的操作保存在 /utils/auth.js 中，需要引入该 js。

CMS后台管理系统

<el-form :rules=“rules” size=“medium” :model=“loginForm” ref=“loginForm” class=“login-form” @keyup.enter.native=“submitForm”>

<el-button size=“medium” style=“width: 100%” type=“primary” @click=“submitForm”>立即登录

Step2：

修改路由。

定义路由元信息（meta）。meta 用于定义路由元信息，其中 isRouter 用于指示是否开启路由守卫（true 表示开启）。

const routes = [{

path: “/”,

name: “Home”,

component: Home,

children: [{

path: “/about”,

name: “About”,

meta: {

name: ‘关于我们’,

isRouter: true

},

component: () =>

import( /* webpackChunkName: “about” */ “./views/About.vue”)

},

{

path: ‘/demo/echart’,

name: ‘Echarts’,

component: () => import(‘@/views/echart/Echarts.vue’),

meta: {

isRouter: true

}

},

{

path: ‘/demo/ueditor’,

name: ‘Ueditor’,

component: () => import(‘@/views/ueditor/Ueditor.vue’),

meta: {

isRouter: true

}

}

]

},

{

path: “*”,

name: “404”,

component: () => import(“./views/404.vue”)

},

{

path: “/login”,

name: “Login”,

component: () => import(“./views/login.vue”)

}

]

Step3：

添加全局守卫（beforeEach）。

当 isRouter 为 true 时，才会去校验 token，token 校验失败则跳转到 Login 页面重新登录。

// 添加全局路由导航守卫

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

// 当开启导航守卫时，验证 token 是否存在。

if (to.meta.isRouter) {

// 获取 token 值

let token = getToken()

console.log(token)

// token 不存在时，跳转到 登录页面

if (!token || !/\S/.test(token)) {

next({name: ‘Login’})

}

}

next()

})

Step4：

完整 router 如下：

import Vue from “vue”;

import Router from “vue-router”;

import Home from “./views/Home.vue”;

Vue.use(Router);

const routes = [{

path: “/”,

name: “Home”,

component: Home,

children: [{

path: “/about”,

name: “About”,

meta: {

name: ‘关于我们’,

isRouter: true

},

component: () =>

import( /* webpackChunkName: “about” */ “./views/About.vue”)

},

{

path: ‘/demo/echart’,

name: ‘Echarts’,

component: () => import(‘@/views/echart/Echarts.vue’),

meta: {

isRouter: true

}

},

{

path: ‘/demo/ueditor’,

name: ‘Ueditor’,

component: () => import(‘@/views/ueditor/Ueditor.vue’),

meta: {

isRouter: true

}

}

]

},

{

path: “*”,

name: “404”,

component: () => import(“./views/404.vue”)

},

{

path: “/login”,

name: “Login”,

component: () => import(“./views/login.vue”)

}

]

const router = new Router({

routes, // 用于定义 路由跳转 规则

mode: “history”, // mode 用于去除地址中的 #

base: process.env.BASE_URL,

scrollBehavior: () => ({ // scrollBehavior 用于定义路由切换时，页面滚动。

y: 0

})

});

// 添加全局路由导航守卫

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

// 当开启导航守卫时，验证 token 是否存在。

if (to.meta.isRouter) {

// 获取 token 值

let token = getToken()

console.log(token)

// token 不存在时，跳转到 登录页面

if (!token || !/\S/.test(token)) {

next({name: ‘Login’})

}

}

next()

})

// 解决相同路径跳转报错

const originalPush = Router.prototype.push

Router.prototype.push = function push(location) {

return originalPush.call(this, location).catch(err => {

err

})

}

export default router

Step5：

测试一下。

手动模拟 token 失效。token 失效后，点击菜单栏，路由会跳转到 登录界面。

二、模块化封装 axios 请求

---

1、简介

前面封装了 axios，并在 main.js 中全局挂载，所以在组件中可以使用 $http 进行访问。

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

}

export default router

Step5：

测试一下。

手动模拟 token 失效。token 失效后，点击菜单栏，路由会跳转到 登录界面。

二、模块化封装 axios 请求

---

1、简介

前面封装了 axios，并在 main.js 中全局挂载，所以在组件中可以使用 $http 进行访问。

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-mtKduIiw-1715798060374)]