在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录,前端可以判断,后端也会进行判断的,我们前端最好也进行判断。

vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach,他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。

导航钩子有3个参数:

1、to:即将要进入的目标路由对象;

2、from:当前导航即将要离开的路由对象;

3、next :调用该方法后,才能进入下一个钩子函数(afterEach)。

next()//直接进to 所指路由
        next(false) //中断当前路由
        next('route') //跳转指定路由
        next('error') //跳转错误路由

beforeEach:

路由配置文件:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HomePage from '@/pages/home.vue'
Vue.use(Router)
const router=new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/home',
name: 'home',
component: HomePage
},
{
path:'*',
redirect:'/home'
}
],
})
router.beforeEach((to,from,next)=>{
console.log(to);
console.log(from);
next();
})
export default router;

  打印结果如下:

实现用户验证的代码:

 router.beforeEach((to, from, next) => {
//我在这里模仿了一个获取用户信息的方法
let isLogin = window.sessionStorage.getItem('userInfo');
if (isLogin) {
//如果用户信息存在则往下执行。
next()
} else {
//如果用户token不存在则跳转到login页面
if (to.path === '/login') {
next()
} else {
next('/login')
}
}
})

  afterEach:

和beforeEach不同的是afterEach不接收第三个参数 next 函数,也不会改变导航本身,一般beforeEach用的最多,afterEach用的少.

router.afterEach((to,from)=>{ //这里不接收next
console.log(to);
console.log(from);
})

  

5分钟学会vue中的路由守卫(导航守卫)的更多相关文章

  1. vue中的路由独享守卫的理解

    1.vue中路由独享守卫意思就是对这个路由有一个单独的守卫,因为他的守卫方式于其他的凡是不太同 独享守卫于前置守卫使用方法大致是一样的 在路由配置的时候进行配置, { path:'/login', c ...

  2. vue中的路由的跳转的参数

    vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...

  3. 纯小白入手 vue3.0 CLI - 3.3 - 路由的导航守卫

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...

  4. vue进阶:vue-router之导航守卫、路由元信息、路由懒加载

    1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...

  5. vue 中的路由为什么 采用 hash 路由模式,而不是href超链接模式(Hypertext,Reference)?

    1. vue中路由模式的种类有两种 1. 一种是 hash 模式. 2. 一种是 h5 的 history 模式. 2. hash 和 history 都是来自 bom 对象 bom 来自 windo ...

  6. Vue中的路由 以及默认路由跳转

    https://router.vuejs.org/ vue路由配置: 1.安装 npm install vue-router --save / cnpm install vue-router --sa ...

  7. vue学习指南:第十四篇(详细) - Vue的 路由 第四篇 ( 路由的导航守卫 )

    导航守卫 一.全局导航守卫 1. 全局导航守卫,把方法给 router,只要路由发生改变跳转都会触发这个函数 2. 每个路由 都有一个 meta 3. 全局导航守卫分两种: 1. 全局前置导航守卫:路 ...

  8. vue之生命周期与导航守卫

    组件钩子函数: beforeCreate.created.beforeMount.mounted.beforeUpdate.updated.beforeDestroy.destoryed 还有两个特殊 ...

  9. vue中的路由

           路由配置项:        import Router from ‘vue-router’                          1.path:路径              ...

随机推荐

  1. Centos 7内核3升级到4

    步骤 1:检查已安装的内核版本 让我们安装了一个发行版,它包含了一个特定版本的内核.为了展示当前系统中已安装的版本,我们可以: # uname -sr 下面的图片展示了在一台 CentOS 7 服务器 ...

  2. java课程课后作业04之动手动脑

    一.多层的异常捕获-1 先贴出代码: public class CatchWho { public static void main(String[] args) { try { try { thro ...

  3. java开学考试有感以及源码

    一.感想 Java开学测试有感 九月二十号,王老师给我们上的第一节java课,测试. 说实话,不能说是十分有自信,但还好,直到看见了开学测试的题目,之前因为已经做过了王老师发的16级的题目,所以当时还 ...

  4. Python学习之旅(十三)

    Python基础知识(12):函数(Ⅲ) 高阶函数 1.map map()函数接收两个参数,一个是函数,一个是Iterable,map将传入的函数依次作用到序列的每个元素,并把结果作为新的Iterat ...

  5. stm32f7699遇到的犯二问题

    没有看到stlink的驱动,难道板子坏了?? 结果:USB线的问题,换了一根用过的线,就行了:

  6. EF Unknown column 'Project1.FamilyMembers_ID' in 'field list'

    产生成的查询语句中有:Project1.FamilyMembers_ID 字段 原因:就是对象主键对象中有一个属性!

  7. orange---openresty.

    需要有一个类似于API网关的中间件来做API的管理工作,也就是API的实现方面更多的考虑业务逻辑,安全.性能.监控可以交由网关来做(如下图所示,下图根据Kong官方文档修改) 通过MySQL存储来简单 ...

  8. angular--获取时间方法services

    写了一些公用方法获取自然周.传入开始和结束日期,获取中间全部日期等方法 .service('DateServices', [function () { // 获取某年自然周的方法 (如果是当年,只返回 ...

  9. Python基础(十) __init__与__new__区别

    __init__与__new__区别: __init__在python,其实是,在实例化之后执行的,用来初始化一些属性,相当于构造函数,但是又不一样 细心一些,通过参数会有所发现,其实__init__ ...

  10. centos----------centos下安装谷歌浏览器

    1.首先你已经安装了带有可视化界面的centos系统. 2.打开里面自带的一个浏览器,输入网址 http://chrome.richardlloyd.org.uk/install_chrome.sh ...