vue中怎样实现 路由拦截器(当用户没有登录的时候,跳转到登录页面,已经登录的时候,不能跳转到登录页,除非后台token失效)

在 我们需要实现这样 一个功能,登录拦截

其实就是 路由拦截,首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由, 否则就进入登录页面。在路由管理页面添加meta字段

router/index.js文件,例如,在用户直接跳转/manage 路径下的时候,实现路由拦截

 {
path:'/manage',
name:'manage',
component:manage,
meta:{requireAuth:true}
},

我们需要在main.js 中加上

router.beforeEach((to, from, next) => {
console.log(to);
console.log(from);
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if(localStorage.getItem('access_token')){ //判断本地是否存在access_token
next();
}else {

      next({
        path: 'login',
        query: {

          redirect: to.fullPath

        }
      })

    }
}
else {
next();
}
/*如果本地 存在 token 则 不允许直接跳转到 登录页面*/
if(to.fullPath == "/login"){
if(localStorage.getItem('access_token')){
next({
path:from.fullPath
});
}else {
next();
}
}
});

redirect: to.fullPath 用来记录哪里被拦截跳转到登录的,这样登陆完之后可以重新跳转回来这个页面

参数说明:

* to: Route: 即将要进入的目标 路由对象 
     * from: Route: 当前导航正要离开的路由 
     * next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

vue中怎样实现 路由拦截器的更多相关文章

  1. vue中页面跳转拦截器的实现方法

    首先对index.js的router进行配置; export default new Router({ routes: [ { path: '/consultancy', name: 'consult ...

  2. vue 路由拦截器和请求拦截器

    路由拦截器 已路由为导向 router.beforeEach((to,from,next)=>{ if(to.path=='/login' || localStorage.getItem('to ...

  3. J2EE中的过滤器和拦截器

    过滤器和拦截器的相似之处就是拦截请求,做一些预处理或者后处理. 而过滤器和拦截器的区别在于过滤器是相对HTTP请求而言的,而拦截器是相对Action中的方法的. 过滤器:访问web服务器的时候,对一个 ...

  4. 「Vue」登陆-路由拦截器

    1.main.js设置拦截器 router.beforeEach(function (to,from,next) { if (to.meta.requireAuth) { if (store.stat ...

  5. vue导航守卫和axios拦截器的区别

    在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时 ...

  6. vue中axios 配置请求拦截功能 及请求方式如何封装

    main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...

  7. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  8. Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

    准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...

  9. struts2中的方法过滤拦截器

    方法过滤拦截器是只过滤指定的方法,如果使用针对action 的普通的过滤器则会过滤该action内部 所有方法.如果在一个action中同时有多个作为业务逻辑控制的方法存在 的话则会过滤所有的业务逻辑 ...

随机推荐

  1. JQuery获取select选中值和清除选中状态(转)

    1.获取值 var provinceSearch = $("#loc_province_search").find("option:selected").att ...

  2. ArcGIS api for javascript——加载查询结果,悬停显示信息窗口

    转自原文 ArcGIS api for javascript——加载查询结果,悬停显示信息窗口 描述 本例在开始和地图交互前执行一个查询任务并加在查询结果.这允许用户鼠标悬停在任意郡县时立即见到Inf ...

  3. 解决ubuntu上opengl的问题

    装完ubuntu之后,对于opengl的程序总是出现问题,先将解决方案列出如下: http://www.linuxforums.org/forum/ubuntu-linux/175490-graphi ...

  4. K度限制MST poj 1639

    /* k度限制MST:有一个点的度<=k的MST poj 1639 要求1号点的度不超过k 求MST 我们先把1号点扔掉 跑MST 假设有sum个连通分支 然后把这sum个分支连到1上 就得到了 ...

  5. CentOS 安装 MRTG 软件完成后的 403 Forbidden(转载)

    用 yum 安装 MRTG 並设定好之后也把 apache 的 httpd.conf 加上 mrtg 的目录,但 http://server/mrtg 卻一直出現 403 Forbidden.在 ht ...

  6. spring boot测试

    今天在springside里试了spring boot,果然很方便,内置容器,不需要配置web.xml,简单几个文件就可以实现增删改查操作,一些配置如tomcat端口之类的直接写在applicatio ...

  7. wireshark解析rtp协议,流媒体中的AMR/H263/H264包的方法

    抓到完整的流媒体包之后,用wireshark打开,其中的包可能不会自动映射成RTP+AMR/H263/H264的包,做如下修改操作即可:1.  把UDP 包解析成RTP/RTCP包.选中UDP包,右键 ...

  8. 0502 php简单了解

    准备工作: 安装好wamp,配置站点:apache2.4.9\conf\httpd.conf 注意事项: 1.必须有分号 2.不要有无意义空行,会以空格形式输出. 3.变量,关键字(if,for..) ...

  9. python 8:list.sort(reverse=false)、sorted(list, reverse=false)(对列表进行不可恢复排序;对列表进行可恢复排序)

    bicycles = ['trek', 'cannondale', 'redline', 'specialized'] print(bicycles) print(sorted(bicycles)) ...

  10. golang闭包,传统斐波那契

    package main import (    "fmt") func main() {    f := fibonacci()    for i := 0; i < 10 ...