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. (45). Spring Boot MyBatis连接Mysql数据库【从零开始学Spring Boot】

    大家在开发的时候,会喜欢jdbcTemplate操作数据库,有喜欢JPA操作数据库的,有喜欢MyBatis操作数据库的,对于这些我个人觉得哪个使用顺手就使用哪个就好了,并没有一定要使用哪个,个人在实际 ...

  2. ZOJ - 2243 - Binary Search Heap Construction

    先上题目: Binary Search Heap Construction Time Limit: 5 Seconds      Memory Limit: 32768 KB Read the sta ...

  3. kendo Grid的toolbar自定义

    由于这个toolbar官方进增加了create,save还有一个是_____ 所以想要自定义话就需要使用 下面的代码(这个是MVVM模式) data-toolbar='[{ template: Ken ...

  4. [bzoj2086][Poi2010]Blocks_单调栈_双指针

    Blocks bzoj-2086 Poi-2010 题目大意:题目链接. 注释:略. 想法:首先,不难发现,如果连续的一段数的平均值不小于输入的k的话,这段数是满足题意的. 所以,我们再次简化一下:将 ...

  5. Spring MVC-表单(Form)标签-列表框(Listbox)示例(转载实践)

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_listbox.htm 说明:示例基于Spring MVC 4.1.6. 以下示例 ...

  6. v$open_cursor的几个问题

    SQL order by SADDR desc ; SADDR SID USER ADDRESS HASH_VALUE SQL_ID SQL_TEXT -------- ---------- ---- ...

  7. [PWA] Optimize Assets Delivery using preload and prefetch

    By default, browsers load the assets in a render-blocking way. Modern browsers introduced prefetch a ...

  8. 王立平--java se的简单项目创建以及具体解释

    创建项目的简单步骤: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzQyNTUyNw==/font/5a6L5L2T/fontsize/400/ ...

  9. .m文件导入C++头文件带来的错误

    这几天的工作挖了不少的坑.遇到了各种千奇百怪的错误,如今好好总结一下. 新建一个project,然后新建HelloCPP.h,HelloCPP.cpp文件.HelloCPP.h文件内容例如以下: #i ...

  10. java 将byte[]转为各种进制的字符串

    public void test() { byte[] bytes = new byte[10000000]; for (int i = 0; i < 10000000; i++) { if ( ...