axios token验证拦截器

import axios from ‘axios‘;
// req拦截
axios.interceptors.request.use(
  let token = localStorage.getItem(‘token‘)
    config => {
        if (token === null) {  // 判断是否存在token,如果存在的话,则每个http header都加上token
            config.headers.Authorization = `${token}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });

// res拦截
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response.code === 401) {
            // 返回 401 跳转到登录页面
            router.replace({
                path: ‘login‘,
                query: {redirect: router.currentRoute.fullPath}
            })
        }
        return Promise.reject(error.response.msg)   // 返回接口返回的错误信息
    });

PS: 建议把拦截器独立到一个js文件,然后在引入。详细了解请点击

原文地址:https://www.cnblogs.com/model-zachary/p/9162257.html

时间: 2024-10-25 19:27:26

axios token验证拦截器的相关文章

spring登录验证拦截器和根据用户角色登录

大家都知道spring的用户登录拦截器,确实省去了程序员不少的精力,下面说说我在项目中使用的感受. 德安微信管理后台是管理多个微信帐号的平台,登录到平台的用户有三个角色,游客和微信帐号管理员.超级管理员.超级管理员负责建立新的微信帐号.建立新的微信帐号管理员:微信帐号管理员负责维护微信菜单:微信图文消息:处理微信事件,发布产品介绍专题等:游客的功能有浏览.下单.手机号绑定等.基于此我们分配了三个用户角色:ROLE_TRAVELER.ROLE_ADMIN.ROLE_SUPER分别对应游客.微信帐号

Struts开发一个权限验证拦截器来判断用户是否登录

开发一个权限验证拦截器来判断用户是否登录 当用户请求受保护资源时,先检查用户是否登录 如果没有登录,则向用户显示登录页面 如果已经登录,则继续操作 实现步骤 开发权限验证拦截器 在配置文件中定义拦截器并引用它 开发权限验证拦截器 public class AuthInterceptor extends AbstractInterceptor { public String intercept(ActionInvocation invocation) throws Exception { //获取

细说vue axios登录请求拦截器

当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截. 1.安装配置axios cnpm install --save axios 我们可以建一个js文件来做这个统一的处理,新建一个axios.js,如下 import axios from 'axios' import { Indicator } from 'mint-ui'; import { Toast } from 'min

SpringMVC拦截器(实现登录验证拦截器)

本例实现登陆时的验证拦截,采用SpringMVC拦截器来实现 当用户点击到网站主页时要进行拦截,用户登录了才能进入网站主页,否则进入登陆页面 核心代码 首先是index.jsp,显示链接 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <% 3 String path = request.getContextPath(); 4 St

Asp.net Mvc 身份验证、异常处理、权限验证(拦截器)实现代码

本问主要介绍asp.net的身份验证机制及asp.net MVC拦截器在项目中的运用.现在让我们来模拟一个简单的流程:用户登录>权限验证>异常处理 1.用户登录 验证用户是否登录成功步骤直接忽略,用户登录成功后怎么保存当前用户登录信息(session,cookie),本文介绍的是身份验证(其实就是基于cookie)的,下面看看代码. 引入命名空间 using System.Web.Security; Users ModelUser = new Users() { ID = 10000, Nam

struts2学习(6)自定义拦截器-登录验证拦截器

需求:对登录进行验证,用户名cy 密码123456才能登录进去:  登录进去后,将用户存在session中: 其他链接要来访问(除了登录链接),首先验证是否登录,对这个进行拦截: com.cy.model.User.java: package com.cy.model; public class User { private String userName; private String password; public String getUserName() { return userNam

利用axios的request 拦截器,response 拦截器实现加载层的效果

import Vue from 'vue' import router from '../router' import axios from 'axios' import { Indicator } from 'mint-ui'; import { Toast } from 'mint-ui'; axios.defaults.timeout = 30000; axios.defaults.headers.common['Content-Type'] = 'application/json;cha

vue axios请求/响应拦截器

// main.js中配置 // 引入 axios import Axios from 'axios' // 这时候如果在其它的组件中,是无法使用 axios 命令的. // 但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题 Vue.prototype.$axios = Axios // 引用mint-ui import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.use(MintUI) // 一次性注册多个

Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2.具体需求 用户鉴权与重定向:使用Vue提供的路由导航钩子 请求数据序列化:使用axios提供的请求拦截器 接口报错信息处理:使用axios提供的响应拦截器 3.简单实现 3.1 路由导航钩子层面鉴权与重定向的封装 路由导航钩子所有配置均在router/index.js,这里是部分代码 import