1:了解token:有时候大家又说token令牌。整个机制是前端第一次登陆发送请求,后端会根据前端的用户名和密码,
通过一些列的算法的到一个token令牌,
这个令牌是独一无二的,前端每次发送请求都需要携带token令牌,因为只有携带了token令牌,后端才会返回你数据,
如果请求没有token令牌,后端是无法给你数据的。 2:token令牌进行回话保持:第一次登陆时候,后端会返回token令牌,保存在前段,之后每次页面跳转之前获取,
在的导航守卫中拦截判断,如果没有那么就重定向到首页,有的话就放行。 3:在axios请求中配置token:在全局配置的token并不是用作回话保持的,他的作用就是后端获取token,
用作判断,返回数据。axios的请求拦截是配置参数的,
跟回话保持没有关系,跟回话保持有关系的是全局的导航守卫。 4:第一次登陆,在后端返回的数据中把token先存在浏览器中,然后进行路由跳转,
所以在导航守卫的拦截中已经可以获取到第一次登陆的token,第一次登陆是可以判断的。 5:token过期处理 每次请求前端有携带token,后端会验证token,如果过期后端返回一个字段,
前端可以根据字段判断
后端每次接受前端请求的时候都会验证token是否过期,过期了返回一个过期标志,
如code=2(0:success;1:error;2:unlogin),前端根据这些状态码去进行重新登录就行了
这个操作可以在axios响应拦截中操作。
// http response 拦截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
//这里跳转登陆
.....
}
});   

  

token回话保持,axios请求拦截和导航守卫以及token过期处理的更多相关文章

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

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

  2. vue中前端处理token过期的方法与axios请求拦截处理

    在处理token过期的这个问题上困扰了我很久,现在终于解决的了,所以分享出来给大家,希望能够对大家有所帮助. 首先,当然是路由进行拦截,路由拦截当然是在beforeEach中了: router.bef ...

  3. axios请求拦截及请求超时重新请求设置

    自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,需要解决问题: 1. 请求带token校验 2. post请求请求体处理 3. 响应未登录跳转登录页处理 4. 响应错 ...

  4. axios请求,拦截器的使用

    1. axios 创建请求 import axios from 'axios' import {Message} from 'element-ui' import router from " ...

  5. vue/axios请求拦截

    import axios from 'axios';import { Message } from 'element-ui';import Cookies from 'js-cookie';impor ...

  6. axios请求拦截器

    import axios from 'axios';   // 创建axios实例   let service = null;   if (process.env.NODE_ENV === 'deve ...

  7. axios请求拦截器(修改Data上的参数 ==>把data上的参数转为FormData)

    let instance = axios.create({ baseURL: 'http://msmtest.ishare-go.com', //请求基地址 // timeout: 3000,//请求 ...

  8. axios源码解析 - 请求拦截器

    axios请求拦截器,也就是在请求发送之前执行自定义的函数. axios源码版本 - ^0.27.2 (源码是精简版) 平时在业务中会这样去写请求拦截器,代码如下: // 创建一个新的实例 var s ...

  9. axios请求的封装

    /* axios的请求封装 */         //axios的原生写法get,post请求         //第一个参数为请求地址,第二个参数为请求的参数,params是将参数拼接在url的后面 ...

随机推荐

  1. C++实现根据路径读取文件内容

    已知文件路径,用C++实现读取对应文件的内容,代码如下: bool LoadShaderStr(const char* szShaderPath,string& strShaderStr) { ...

  2. TCP协议-如何保证传输可靠性

    转自 https://blog.csdn.net/xuzhangze/article/details/80490362 TCP协议保证数据传输可靠性的方式主要有: (1)检验和 在发送数据时,为了计算 ...

  3. (12)SecureCRT中文乱码问题

    Options -- Session Options -- Appearance --Character encoding:选择UTF-8

  4. 《深入理解java虚拟机》读书笔记——java内存区域和内存溢出异常

    几种内存溢出异常: 堆溢出 原因:创建过多对象,并且GC Roots到对象之间有可达路径. 分两种情况: Memory Leak:无用的对象没有消除引用,导致无用对象堆积.例如<Effictiv ...

  5. Gradle 打多渠道包

    使用gradle 打多渠道包记录经验如下图可见,每个渠道是包含debug 和realse版本的.通过打印BASE_URL 发现在渠道和版本中都可以修改BuildConfig的常量,这样一次可以打出多个 ...

  6. AE10.0及AE10.0以上的版本调用ESRI.ArcGIS.esriSystem出现的问题

    如果本地安装的是AE10.0以上,那么添加ESRI.ArcGIS.esriSystem引用时,会出现esriLicenseProductCode并不包含esriLicenseProductCodeAr ...

  7. C++builder Tokyo 调用com 不正确的变量类型

    C++builder Tokyo 调用com 不正确的变量类型 tt.OleFunction("interface_call","MS01",&erro ...

  8. Delphi中Chrome Chromium、Cef3学习笔记(四)

    原文   http://blog.csdn.net/xtfnpgy/article/details/48155323   一.遍历网页元素并点击JS: 下面代码为找到淘宝宝贝页面,成交记录元素的代码: ...

  9. Linux命令:typeset

    语法 typeset [-afFgrxilnrtux] [-p] [name[=value] …] 说明 declare的同义词,提供它只是为了保持和ksh兼容.

  10. 函数function

    function add(x,y,z){ sum = x + y +z; document.write(x+"+"+y+"+"+z+"="+ ...