vue3+ts学游记-004 模拟登录

第一步

安装axios 使用npm install --save axios进行安装

封装axios,在src目录下新建request文件夹，新建index.ts文件

import axios from "axios";
//创建axios实例
const service = axios.create({
    baseURL: "https://www.fastmock.site/mock/bf1fcb3c2e2945669c2c8d0ecb8009b8/api",
    timeout: 5000,//超时时间
    headers: {//编译语言
        "Content-type" : "application/json;charset=utf-8"
    }
})
//请求拦截
//就是你请求接口的时候，我会先拦截下来，对你的数据做一个判断，或者携带个token给你
service.interceptors.request.use((config) => {//请求的数据
    config.headers = config.headers || {}  // 没有数据的话就设置为空数据
    if(localStorage.getItem("token")){//先确保登录
        config.headers.token = localStorage.getItem("token") || ""
    }
    return config//必须返回出去，不然请求发不出去
})
//响应拦截：后端返回来的结果
service.interceptors.response.use((res) => {
    const code : number = res.data.code//code是后端的状态码
    if(code != 200){
      return Promise.reject(res.data)
      //Promise.reject(res.data)可以返回失败的数据
    }
    return res.data//返回成功的数据
},(err) => {
    console.log(err)//错误信息的处理
})
//因为别的地方要用，所以就把实例暴露出去，导出
export default service

第二步

发送请求，在request文件夹下新建api.ts文件

import service from ".";
interface loginData{
    username:string,
    password:string
}
// 登录接口
export function login(data:loginData){
    return service({
        url:"/login",
        method:"post",
        data
    })
}

第三步

完善src\views\LoginView.vue代码

绑定dom表单的ruleFormRef变量

定义登录功能

登录后保存token并跳转到首页