你可能不清楚的 Vue Router 深度用法(一)
Vue Router 简单易上手,能实现大部分的需求。但是,如果在项目里需要更细致的控制路由,以实现与其同步的效果,就需要挖掘其文档里没详细提及的内容。第一章为路由元信息用途挖掘。
路由元信息用途
(1)验证用户身份
大部分项目,除了登录页、重置密码页、用户协议页以外,页面都需要验证用户身份进行访问。使用 Vue Router 可以配合后端进行双重验证。
(登录)验证身份方法:
1、给需要验证的路由对象添加 meta 字段,里面自定义一个代表验证的字段:
const router = new VueRouter({routes: [{path: '/foo',component: Foo,children: [{path: 'bar',component: Bar,meta: { requiresAuth: true // 添加该字段,表示进入这个路由是需要登录的}}]}]
})
2、在全局导航钩子里验证 requiresAuth 字段:
注意事项:
- 使用 beforeEach 在路由变化前验证。验证原理是在跳转前,访问目标路由对象的 requiresAuth 字段判断是否需要验证用户身份,如为是,检测是否有保存用户信息(即用户登录成功后前端保存的信息,例如 token)
- 每个路由都有一个 $route.matched 数组,包含当前路由的父级路由对象和当前路由对象,在组件中可以通过 this.$route.matched 访问
- beforeEach 的 to 参数即目标路由对象 $route,to.matched 即是它的路由数组
- 因此,使用 some 方法,只要路由数组里的任意路由对象需要验证身份,即进行验证
- 验证成功跳转正确页面;失败则跳到登录页,将目标地址附在 url 的 query 里,登录成功就跳转到目标地址
router.beforeEach((to, from, next) => {if (to.matched.some(record => record.meta.requiresAuth)) {if (!auth.loggedIn()) { // 没登录next({path: '/login',query: { redirect: to.fullPath }})} else {next() // 确保一定要调用 next()}} else {next() // 确保一定要调用 next()}
})
3、拦截 http 请求,验证用户身份
为了防止本地保存的 token 过期,需要拦截 http 请求,为每次请求头加上 token ,然后拦截 http 响应,根据响应内容判断是否需要跳回登录页面重新登录。使用 axios 的方法如下:
// http request 拦截器
axios.interceptors.request.use(config => {if (auth.loggedIn()) { // 判断是否存在token,如果存在的话,则每个http header都加上tokenconfig.headers.Authorization = `token ${auth.loggedIn()}`;}return config;},err => {return Promise.reject(err);});// http response 拦截器axios.interceptors.response.use(response => {return response;},error => {if (error.response) {switch (error.response.status) {case 401:// Unauthorized// 返回 401 清除token信息并跳转到登录页面auth.clear();router.replace({path: 'login',query: {redirect: router.currentRoute.fullPath}})}}return Promise.reject(error.response.data) // 返回接口返回的错误信息});
(2)定义用户权限能访问的页面
前端查看权限,也是配合后端进行某些页面的隐藏显示功能。一般应用于综合的办公系统,由 IT 部分配账号,不同部门的人只能看到自己负责的内容,例如行政部不会看到财务数据页面。
实现方法:
- 与后端商定每个用户角色对应的 level 级别,以数值表示
- 前端路由每个页面的 meta 对象添加 level 字段,值为数组,里面是有权限访问页面的 level 数值
- 登录成功,后台返回用户 token 的同时,返回其所属的 level 字段
- 组件代码比较目标页面的 level 与用户 level,只显示包含在目标 level 数组里的页面
- 全局导航钩子 beforeEach 里比较目标页面的 level 与用户 level,包含在目标 level 数组里则正确跳转,反之取消跳转并提示权限不足
上面第5步是为了防止用户直接在浏览器输入目标地址
(3)其他内容控制
可以控制显示路由固定的搭配,例如某个路由地址的 title 是固定的字符串、固定的欢迎语、固定的 favicon 等。在组件里通过 this.$route.meta.xxx 访问。
const router = new VueRouter({routes: [{path: '/foo',component: Foo,children: [{path: 'bar',component: Bar,meta: { title: '标题',message: '欢迎您',requiresAuth: true // 添加该字段,表示进入这个路由是需要登录的}}]}]
})
第二章的内容在此 https://segmentfault.com/a/11...
你可能不清楚的 Vue Router 深度用法(一)相关推荐
- 你可能不清楚的 Vue Router 深度用法(二)
此为 Vue Router 深度用法的第二篇,主要讲述动态路由匹配用法.第一篇的链接在此: https://segmentfault.com/a/11... 动态路由匹配是用于把某种模式匹配到的所有路 ...
- vue router 参数_Vue.js项目开发技术解析
Vue.js项目开发技术解析 一.Vue.js实例 在一个Vue.js工程中,用于显示内容最基层的实例称之为根实例.通过该实例可以进行页面或组件的更新和显示.对于项目本身而言,无论是什么样的页面,都要 ...
- 【Vue.js】Vue.js中常用的UI组件库和Vue Router
1.Vue生态中常用的UI组件库 1. vant 介绍 轻量级.可靠的移动端 Vue 组件库 有赞前端团队出品 GitHub地址:https://github.com/youzan/vant 特性 拥 ...
- Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战 前言 一.什么是单页面应用及实现前端路 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)...
昨日内容回顾 0. 组件注意事项!!!data属性必须是一个函数!1. 注册全局组件Vue.component('组件名',{template: ``})var app = new Vue({el: ...
- Vue | Vue Router 路由的使用
文章目录 一.路由的基本使用 1.创建 Vue 项目并引入 vue-router 2.编写 Components 组件 3.编写路由文件 4.在主文件 Main.js 中引入路由 5.添加 route ...
- VueJS 官方路由之 Vue Router
文章目录 参考 描述 Vue Router 获取 npm yarn 依赖问题 使用 router-link router-view 配置路由插件 基本结构 子组件 导入需要进行路由匹配的组件 定义路由 ...
- Vue源码 Vue Router(三)matcher 路由匹配器
Vue源码 Vue Router(三)matcher Vue源码 Vue Router(三)matcher matcher createMatcher addRoutes match 总结 单步调试参 ...
- 面试考问Vue Router 的路由模式,这个回答令我直接出局!
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
最新文章
- centos7 virtualbox使用internal network 内网模式
- 细说接口性能优化的11个小技巧
- linux 内核调整相关参数
- ZeroC ICE java异步实现方式(ami/amd)
- wordpress 常用函数-wpdb类
- 【多线程】1.条件变量--std::condition_variable
- 从Java视角理解伪共享(False Sharing)
- 二分搜索 HDOJ 2289 Cup
- Commons net实现 FTP上传下载
- openmp与openmpi区别
- python 源代码 macd双底 高 低_MACD指标DIFF双底与双顶:买入与卖出
- 代码回到之前版本_聊一聊版本控制
- python如何制作一个工程软件_使用python制作一个解压缩软件
- 基于live555开发嵌入式linux系统的rtsp直播服务
- eos操作系统_【EOS币资讯】EOS币与以太坊有什么不同?
- ASP.NET Core部署在IIS上
- Linux 文件,目录的属性
- Paper:LSTM之父眼中的深度学习十年简史《The 2010s: Our Decade of Deep Learning / Outlook on the 2020s》的解读
- 一种跨平台的C/C++动态库的符号隐藏方式
- Word2010中插入多级列表编号将默认标题样式变成多级编号