将 Token 存储在请求头中发送接口请求

文章目录

一、需求

用户登录后将 token 存储在下次接口访问的请求头中进行接口请求

二、分析

js 复制代码
import router from './router';
import { Message } from 'element-ui';
import Axios from 'axios'

router.beforeEach((to, from, next) => {
    if (to.path === '/login') {
      next();
    } else {
      let token = localStorage.getItem('Token');
      if (token === null || token === '') {
        Message.warning('请登录')
        next('/login');
      } else {
          next();
      }
    }
  });
// 添加请求拦截器,在请求头中加token
Axios.interceptors.request.use(
    config => {
      if (localStorage.getItem('TOKEN')) {
        config.headers.TOKEN = localStorage.getItem('TOKEN');
      }
      return config;
    },
    error => {
      return Promise.reject(error);
    });
相关推荐
Xzh04231 天前
前后端学习的交界
java·ajax·maven·axios·测试
我登哥MVP2 天前
Ajax 详解
java·前端·ajax·javaweb
仲夏幻境2 天前
js利用ajax同步调用如何
开发语言·javascript·ajax
寒月霜华2 天前
JavaWeb前端-Ajax
ajax
蹦极的考拉3 天前
PHPCMS V9 自定义证书查询模块(Ajax+防刷+倒计时)
ajax·证书查询·phpcmsv9表单
.生产的驴4 天前
React useEffect组件渲染执行操作 组件生命周期 监视器 副作用
前端·css·react.js·ajax·前端框架·jquery·html5
小白学大数据5 天前
Python爬虫常见陷阱:Ajax动态生成内容的URL去重与数据拼接
爬虫·python·ajax
一壶浊酒..6 天前
ajax局部更新
前端·ajax·okhttp
一壶浊酒..7 天前
什么是AJAX
前端·javascript·ajax
加洛斯10 天前
AJAX 知识篇(2):Axios的核心配置
前端·javascript·ajax