文章目录
前言
上章链接:后台管理模式(上) 点击跳转
*接上章基础配置写完。本章继续开始编写登录页面,正文如下:
一、创建一个文件夹 utils 里面新增一个 setToken.js 文件(设置token验证)
/*
* @Author: error: git config user.name && git config user.email & please set dead value or install git
* @Date: 2022-11-25 11:07:56
* @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
* @LastEditTime: 2023-01-01 15:49:12
* @FilePath: \project-one\src\utils\setToken.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
// 设置 token 值
export function setToken(tokenKey, tokenValue) {
return localStorage.setItem(tokenKey,tokenValue)
}
// 获取 token 值
export function getToken(tokenKey) {
return localStorage.getItem(tokenKey)
}
// 删除 token 值
export function removeToken(tokenKey) {
return localStorage.removeItem(tokenKey)
}
二 、创建一个api文件夹 新增 service.js (axios拦截器)
import axios from 'axios'
// 引入 token 信息
import {
getToken } from "@/utils/setToken";
import {
Message } from 'element-ui';
const service = axios.create({
// baseURL会自动加在接口地址上
baseURL: "/api",
// timeout 规定的请求时间
timeout: 5000 // 指定请求的超时毫秒数,如果请求超过这个时间,那么请求就会中断。
})
// 添加请求拦截器
service.interceptors.request.use((config) => {
// 在发送请求前做些什么
// 获取并设置token
// console.log(getToken('token'))
// 在请求报文的头部,添加 token
config.headers['token'] = getToken('token')
return config
},(error) => {
// 对请求错误做些什么
return Promise.reject(error)
})
// 添加响应拦截器
service.interceptors.response.use((response) => {
// 对响应数据做些什么
// console.log(response)
// 对响应的数据,同一做出判断
let {
status, message } = response.data
if (status !== 200) {
Message({
message: message || 'error', type: 'warning'})
}
return response
}, (error) => {
// 对响应错误做点什么
return Promise.reject(error)
})
export default service
三、在api文件夹里 新增一个 api.js 来接收数据(把api封装哪里需要某项数据直接引入就行)
这里解释一下 什么是 qs
qs.stringify 将对象解析为url; qs.parse() 将url转换成对象; 类似于 JSON.Stringify()
import service from "./service";
import qs from 'qs'
// 登录接口
export function login(data) {
return service(