vue2版本《后台管理模式》（中）

---

前言

上章链接：后台管理模式（上） 点击跳转

*接上章基础配置写完。本章继续开始编写登录页面，正文如下：

---

一、创建一个文件夹 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({