一、路由拦截

1.首先在router的index.js里配置一个自定义字段requireAuth,用该字段来判断进入该路由是否需要登录。如果已经登陆则进入该路由,反之则进入登录页面。

如图是路由配置:

2.在main.js里面利用vue-router的beforeEach钩子函数对路由进行判断。

实例代码如下所示:

解释下这段代码,当我们在登录的时候,利用sessionStorage保存了用户的token值,如果我们进入某一个需要登录的路由并且能够拿到token值的话,则可以直接next();反之进入登录页选择登录。

当然还有一种情况,那就是用户并非主动退出登录,而是token自动失效。此时token值依然保存在本地,需要用户重新登录。这时候就需要结合 http 拦截器 + 后端接口返回的http 状态码来判断。

二、拦截器

当返回401状态码,用户则需要重新登录。

vue+axios完美实现前端路由拦截的更多相关文章

  1. 10. vue axios 请求未完成时路由跳转报错问题

    axios 请求未完成时路由跳转报错问题 前两天项目基本功能算是完成了,在公司测试时遇到了遇到了一个问题,那就是在请求未完成时进行路由跳转时会报错,想了几种办法来解决,例如加loading,请求拦截, ...

  2. Vue+Axios+Nigix+SpringCloud前端和后端搭建及其碰到的问题

    一.Axios.Router的安装和使用 1.如何安装Axios和Router 1).进入到工程所在的文件夹,通过cmd指令,进入到window的dos界面 2).输入:npm install axi ...

  3. Vue axios封装 实现请求响应拦截

    封装 axios.js import axios from 'axios' import { baseURL } from '@/config' class HttpRequest { constru ...

  4. vue+axios 前端实现登录拦截(路由拦截、http拦截)

    一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录 ...

  5. 【转】vue+axios 前端实现登录拦截(路由拦截、http拦截)

    一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录 ...

  6. Vue+axios 实现http拦截及路由拦截

    现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的 ...

  7. vue 路由拦截、axios请求拦截

    路由拦截 项目中,有些页面需要登录后才能进入,例如,在某页面A,用户在操作前需要先进入登录页(此时需要将上一页的地址(/survey/start)作为query存入login页面的地址中,如: htt ...

  8. 【vue+axios】一个项目学会前端实现登录拦截

    原文链接:github.com 一个项目学会vue全家桶+axios实现登录.拦截.登出功能,以及利用axios的http拦截器拦截请求和响应. 前言 该项目是利用了Github 提供的persona ...

  9. vue+axios 前端实现的常用拦截

    一.路由拦截使用 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由,否则就进入登录页面,路由配置如下: cons ...

随机推荐

  1. 最详细的 linux grep命令教程

    简介 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具,它 ...

  2. SQLI DUMB SERIES-22

    (1)根据题目知道此处是双引号注入,其余的与上一关相同. 登录成功后,用burp抓包,再刷新浏览器页面.寻找闭合方式: 闭合方式果然为双引号. (2)其payload与21关相同,需要对payload ...

  3. HTML下标签之应用

    <!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...

  4. windows 通过scoop安装yarn

    首先进入cmd,输入powershell指令,如图 Prompt should now start with "PS " 然后run iex (new-object net.web ...

  5. 16.python-I/O模型

    一.事件驱动模型1.什么是事件驱动模型:本身是一种编程范式,这里程序的执行是由外部事件来决定的.它的特点是包含一个事件循环,当外部事件发生时使用回调机制来触发相应的处理.常见的编程范式(单线程)同步以 ...

  6. js cookie 操作 封装

    pCookie.js (function(){ var PotatogCookie = {}; //设置cookie PotatogCookie.set = function(key, value, ...

  7. meven仓库设置局域网私服

    找到设置文件 在设置文件中配置私服地址

  8. 03day->python基本数据类型

    基本数据类型 1.数字(int)     a = 5     a.bit_length()  # 查看数字实际用到的bit位 2.布尔值(bool)     用于条件判断 3.字符串(str)     ...

  9. tomcat catalina.out乱码

    启动参数添加-Dfile.encoding=UTF-8 -Dsun.jnu.encoding=UTF-8解决

  10. Btrace 拦截时机

    Kind.ENTRY 入口,默认值 Kind.RETURN:  返回 Kind.THROW: 异常 Kind.Line: 行 一.返回时拦截 package com.example.monitor_t ...