vue+axios完美实现前端路由拦截
一、路由拦截
1.首先在router的index.js里配置一个自定义字段requireAuth,用该字段来判断进入该路由是否需要登录。如果已经登陆则进入该路由,反之则进入登录页面。
如图是路由配置:
2.在main.js里面利用vue-router的beforeEach钩子函数对路由进行判断。
实例代码如下所示:
解释下这段代码,当我们在登录的时候,利用sessionStorage保存了用户的token值,如果我们进入某一个需要登录的路由并且能够拿到token值的话,则可以直接next();反之进入登录页选择登录。
当然还有一种情况,那就是用户并非主动退出登录,而是token自动失效。此时token值依然保存在本地,需要用户重新登录。这时候就需要结合 http 拦截器 + 后端接口返回的http 状态码来判断。
二、拦截器
当返回401状态码,用户则需要重新登录。
vue+axios完美实现前端路由拦截的更多相关文章
- 10. vue axios 请求未完成时路由跳转报错问题
axios 请求未完成时路由跳转报错问题 前两天项目基本功能算是完成了,在公司测试时遇到了遇到了一个问题,那就是在请求未完成时进行路由跳转时会报错,想了几种办法来解决,例如加loading,请求拦截, ...
- Vue+Axios+Nigix+SpringCloud前端和后端搭建及其碰到的问题
一.Axios.Router的安装和使用 1.如何安装Axios和Router 1).进入到工程所在的文件夹,通过cmd指令,进入到window的dos界面 2).输入:npm install axi ...
- Vue axios封装 实现请求响应拦截
封装 axios.js import axios from 'axios' import { baseURL } from '@/config' class HttpRequest { constru ...
- vue+axios 前端实现登录拦截(路由拦截、http拦截)
一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录 ...
- 【转】vue+axios 前端实现登录拦截(路由拦截、http拦截)
一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录 ...
- Vue+axios 实现http拦截及路由拦截
现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的 ...
- vue 路由拦截、axios请求拦截
路由拦截 项目中,有些页面需要登录后才能进入,例如,在某页面A,用户在操作前需要先进入登录页(此时需要将上一页的地址(/survey/start)作为query存入login页面的地址中,如: htt ...
- 【vue+axios】一个项目学会前端实现登录拦截
原文链接:github.com 一个项目学会vue全家桶+axios实现登录.拦截.登出功能,以及利用axios的http拦截器拦截请求和响应. 前言 该项目是利用了Github 提供的persona ...
- vue+axios 前端实现的常用拦截
一.路由拦截使用 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由,否则就进入登录页面,路由配置如下: cons ...
随机推荐
- 最详细的 linux grep命令教程
简介 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具,它 ...
- SQLI DUMB SERIES-22
(1)根据题目知道此处是双引号注入,其余的与上一关相同. 登录成功后,用burp抓包,再刷新浏览器页面.寻找闭合方式: 闭合方式果然为双引号. (2)其payload与21关相同,需要对payload ...
- HTML下标签之应用
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
- windows 通过scoop安装yarn
首先进入cmd,输入powershell指令,如图 Prompt should now start with "PS " 然后run iex (new-object net.web ...
- 16.python-I/O模型
一.事件驱动模型1.什么是事件驱动模型:本身是一种编程范式,这里程序的执行是由外部事件来决定的.它的特点是包含一个事件循环,当外部事件发生时使用回调机制来触发相应的处理.常见的编程范式(单线程)同步以 ...
- js cookie 操作 封装
pCookie.js (function(){ var PotatogCookie = {}; //设置cookie PotatogCookie.set = function(key, value, ...
- meven仓库设置局域网私服
找到设置文件 在设置文件中配置私服地址
- 03day->python基本数据类型
基本数据类型 1.数字(int) a = 5 a.bit_length() # 查看数字实际用到的bit位 2.布尔值(bool) 用于条件判断 3.字符串(str) ...
- tomcat catalina.out乱码
启动参数添加-Dfile.encoding=UTF-8 -Dsun.jnu.encoding=UTF-8解决
- Btrace 拦截时机
Kind.ENTRY 入口,默认值 Kind.RETURN: 返回 Kind.THROW: 异常 Kind.Line: 行 一.返回时拦截 package com.example.monitor_t ...