首先确保我们已经设置的store.js进行值的存取,这时候我们需要配置请求和响应的拦截器设置

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
// 引入store
import store from './store' // 如何localStorage的token不存在或是空跳转到路由
router.beforeEach((to, from, next) => {
if (to.path === '/') {
next();
} else {
let token = window.localStorage.token;
if (token === 'null' || token === '' || token === undefined) {
next('/');
} else {
next();
}
} }) //与后端定义状态是100签名错误 跳转到登录界面
axios.interceptors.response.use(
response => {
//当返回信息为未登录或者登录失效的时候重定向为登录页面
if (response.data.status == 100 || response.data.message == '用户未登录或登录超时,请登录!') {
router.push({
path: "/",
querry: { redirect: router.currentRoute.fullPath }//从哪个页面跳转
})
}
return response;
},
error => {
return Promise.reject(error)
}
)

  

vue配置请求拦截器和响应拦截器的更多相关文章

  1. 手把手教你vue配置请求本地json数据

    本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require ...

  2. vue配置 请求本地json数据

    第一步:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加 //第一步const expres ...

  3. vue配置请求转发解决跨域问题

    通过nodejs的请求转发到后台,前端地址:http://localhost:8080   后端地址:http://localhost:8081 vue.config.js内容如下: let prox ...

  4. axios请求响应拦截器的应用

    什么是axios拦截器? 一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器.响应拦截器. 请求拦截器在请求发送前进行必要操作处理 例如添加统一cookie.请求体加验证.设置请求头 ...

  5. VUE 数据请求和响应(axios)

    1. 概述 1.1 简介 axios是一个基于Promise(本机支持ES6 Promise实现) 的HTTP库,用于浏览器和 nodejs 的 HTTP 客户端.具有以下特征: 从浏览器中创建 XM ...

  6. vue axios请求/响应拦截器

    // main.js中配置 // 引入 axios import Axios from 'axios' // 这时候如果在其它的组件中,是无法使用 axios 命令的. // 但如果将 axios 改 ...

  7. Vue添加请求拦截器

    一.现象 统一处理错误及配置请求信息 二.解决 1.安装 axios  , 命令: npm install axios --save-dev 2.在根目录的config目录下新建文件 axios.js ...

  8. 【转】AngularJs HTTP请求响应拦截器

    任何时候,如果我们想要为请求添加全局功能,例如身份认证.错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段. angularJs通过拦截器提供了一个从全局层面进行处理的途 ...

  9. vue中使用axios与axios的请求响应拦截

    VUE中使用Axios axios的安装 npm install axios vue-axios axios在vue的配置与使用 在main.js中引入axios和vue-axios import a ...

随机推荐

  1. P6076-[JSOI2015]染色问题【组合数学,容斥】

    正题 题目链接:https://www.luogu.com.cn/problem/P6076 题目大意 给出\(n*m\)的网格,\(c\)种颜色涂色要求 每个格子可以染色也可以不染 每一行每一列至少 ...

  2. P5540-[BalkanOI2011]timeismoney|最小乘积生成树【最小生成树,凸壳】

    正题 题目链接:https://www.luogu.com.cn/problem/P5540 题目大意 给出\(n\)个点\(m\)条边边权是一个二元组\((a_i,b_i)\),求出一棵生成树最小化 ...

  3. Unittest 框架之测试固件-----(setUp与tearDown)你真的会用吗?

    前言 做自动化测试中,需要管理大量的测试用例,如果不用框架管理用例,那会是一件很麻烦的事. 如果所示只写了一个用例,内容就是输入网易邮箱账号和密码 test fixture:测试固件 简单来说就是做一 ...

  4. Shiro 550反序列化漏洞分析

    Shiro 550反序列化漏洞分析 一.漏洞简介 影响版本:Apache Shiro < 1.2.4 特征判断:返回包中包含rememberMe=deleteMe字段. Apache Shiro ...

  5. 从源码解析Electron的安装为什么这么慢

    前言 Electron作为一款跨平台的桌面应用端解决方案已经风靡全球.作为开发者,我们几乎不用关心与操作系统的交互,直接通过Web前端技术与Electron提供的API就可以完成桌面应用端的开发. 然 ...

  6. H5移动端适配方案-rem

    为什么移动端要适配: 由于移动设备的尺寸不一,所以移动端的页面要能够适应不同尺寸的设备,即页面的自适应,让页面在视觉上保持一致. rem:rem 是css3的一种相对单位,参考是根元素HMTL的fon ...

  7. 前段--->js

    一,java script的引入方式 1,直接在script里书写你的代码 <script> alert("hbflfb")</script> 2,引入额外 ...

  8. CF1092F Tree with Maximum Cost(dfs+dp)

    果然我已经菜到被\(div3\)的题虐哭了 qwq 首先看到这个题,一个比较显然的想法就是先从1号点开始\(dfs\)一遍,然后通过一些奇怪的方式,再\(dfs\)一遍得到其他点的贡献. 那么具体应该 ...

  9. SpringBoot-使用异步

    SpringBoot提供了异步的支持,上手使用十分的简单,只需要开启一些注解支持,配置一些配置文件即可! 编写方法,假装正在处理数据,使用线程设置一些延时,模拟同步等待的情况: service: @S ...

  10. pycharm设置文件中显示模板内容

    pycharm中设置自己的文件模板  File>>Settings>>Editor>>File and Code Templates 选择文件类型或者输入文件类型 ...