将 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);
    });
相关推荐
xkroy8 小时前
ajax
前端·javascript·ajax
元亓亓亓8 小时前
JavaWeb--day3--Ajax&Element&路由&打包部署
android·ajax·okhttp
Yvonne爱编码8 小时前
AJAX入门-URL、参数查询、案例查询
前端·javascript·ajax
lwprain1 天前
龙蜥8.10中spark各种集群及单机模式的搭建spark3.5.6(基于hadoop3.3.6集群)
大数据·ajax·spark
知识分享小能手1 天前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
Yvonne爱编码2 天前
构建高效协作的桥梁:前后端衔接实践与接口文档规范详解
前端·git·ajax·webpack·node.js
William_cl2 天前
MVC 中 AJAX 与前后端交互深度实战(含独家避坑与场景化方案)
ajax·mvc·交互
Yvonne爱编码3 天前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js
闯闯桑3 天前
Spark 中spark.implicits._ 中的 toDF和DataFrame 类本身的 toDF 方法
大数据·ajax·spark·scala
2503_928411565 天前
9.8 ajax+php基础语法
ajax·okhttp·php