首先确保我们已经设置的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. MySQL&ES连接池

    数据库的连接池建议放在类似settings.py的配置模块中,因为基本都是配置项,方便统一管理. 1) 连接池类#settings.py import os from DBUtils.PooledDB ...

  2. P4859-已经没有什么好害怕的了【容斥,dp】

    正题 题目链接:https://www.luogu.com.cn/problem/P4859 题目大意 两个长度为\(n\)的序列\(a,b\)两两匹配,求\(a_i>b_i\)的组数比\(a_ ...

  3. 博客调网易云歌单JS

    <!--音乐--> <link rel="stylesheet" href="https://blog-static.cnblogs.com/files ...

  4. Javascript设计模式之原型模式、发布订阅模式

    原型模式 原型模式用于在创建对象时,通过共享某个对象原型的属性和方法,从而达到提高性能.降低内存占用.代码复用的效果. 示例一 function Person(name) { this.name = ...

  5. Git 管理工具 基本用法

    git管理工具基本操作命令: 1. 提交 git push origin dev 2.拉取分支: git pull 3.创建并转换分支: git switch -c dev; 4.直接切换到已有分支: ...

  6. 服务注册中心之Eureka使用

    一.Eureka基础 Eureka是Netflix开发的服务发现框架,本身是一个基于REST的服务,主要用于定位运行在AWS域中的中间层服务,以达到负载均衡和中间层服务故障转移的目的.SpringCl ...

  7. 利用水文分析方法提取山脊线和山谷线(ArcPy实现)

    一.背景 作为地形特征线的山脊线.山谷线对地形.地貌具有一定的控制作用.它们与山顶点.谷底点以及鞍部点等一起构成了地形起伏变化的骨架结构.同时由于山脊线具有分水性,山谷线具有合水性特征,使得它们在地形 ...

  8. JavaScript兼容性汇总

    一般兼容性问都体现到DOM和事件上 ​ 只聊ie6+版本浏览器,希望小伙伴们别纠结更低版本浏览器哈^_^ DOM 获取元素 document.getElementsByclassName 不兼容ie6 ...

  9. JDK 8中重要的函数式接口(必知必会)

    JDK 8 提供的重要函数式接口: Consumer (消费者) 功能:接收一个对象,返回void. 定义:void accept(T t) 默认方法:Consumer andThen(Consume ...

  10. 【UE4 C++】Actor 与 Component —— 创建、销毁

    Actor的生成与销毁 创建Actor实例 UClass* TSubclassOf<T> SpawnActor() UPROPERTY(EditAnywhere, Category = & ...