后端管理系统从零到部署发布流程之三（登录跳转）

后端管理系统从零到部署发布流程之三（登录API 配置 与 路由跳转）

1. 数据请求配置

1.1 声明请求配置

在 src 目录中 新建文件夹 utils，并在 utils 文件夹中新建文件 request.ts 文件，这个文件是用来做数据请求配置的。

import axios from 'axios'

// 请求配置
const options = {
   
	// 请求根路径
	baseURL: '',
	// 请求超时时间，单位毫秒
	timeout: 60000,
	// 请求头配置
	headers: {
   
		'Content-Type': 'application/json;charset=utf-8'
	}
}

const request = axios.create(options)

export default request

1.2 请求拦截器

• config: 请求发起前的钩子，当每次请求发起前都会触发，并且可以修改请求参数。
• error: 请求发起前的钩子，当发生语法或者逻辑错误时会触发。

// 请求拦截器
request.interceptors.request.use(
	config => {
   
		// 请求数据
		return config
	},
	error => {
   
		// 请求报错
		return Promise.reject(error)
	}
)

1.3 响应拦截器

• response: 响应数据前的钩子，每次响应返回前都会触发，并且可以对返回的数据进行处理。
• error: 响应数据前的钩子，当响应数据没有返回，或者HTTP服务出现错误时会触发。

// 响应拦截器
request.interceptors.response.use(
	response => {
   
		// 响应拦截的数据
		return response
	},
	error => {
   
		// 响应报错，如：400， 401， 404， 500， 502
		return Promise.reject(error)
	}
)

1.4 Token 验证

在 utils 文件夹中新建文件 auth.ts 文件，这个文件用来放置一些常用的工具函数。

1.4.1 如何存储 token ？