小权kasa:axios二次封装

import axios from "axios";
// import qs from "qs";
axios.defaults.baseURL = "http://114.67.241.121:8088/";
axios.defaults.headers["Content-Type"] = "multipart/form-data";
// axios.defaults.transformRequest = data => qs.stringify(data);
axios.defaults.timeout = 10000;
// 设置CORS跨域允许携带资源凭证
axios.defaults.withCredentials = false;
axios.interceptors.request.use(
  config => {
    console.log(config.headers)
    let token = localStorage.getItem("token");
    token && (config.headers.Authorization = token);
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);
export default axios;

例子:

import axiosHttp from "./request.js";
export const login = data => {
  return axiosHttp({
    method: "post",
    url: "user/login",
    data
  });
};
export const getStuList = data => {
  return axiosHttp({
    method: "get",
    url: "stu/list",
    data
  });
};
export const add = data => {
  return axiosHttp({
    headers: { "Content-type": "application/json" },
    method: "post",
    url: "stu/add",
    data
  });
};
export const edit = data => {
  return axiosHttp({
    headers: { "Content-type": "application/json" },
    method: "post",
    url: "stu/edit",
    data
  });
};
export const del = data => {
  return axiosHttp({
    // headers: { "Content-type": "application/json" },
    method: "post",
    url: "stu/del",
    data
  });
};

携带token实例操作:

<template>
  <div class="wrapper">
    <el-card class="box-card">
      <h1>管理员后台登录</h1>
      <div class="text item">
        用户名:<el-input
          style="width:200px"
          placeholder="请输入内容"
          v-model="user.username"
          clearable
        >
        </el-input>
      </div>
      <div class="text item">
        密&nbsp码&nbsp&nbsp:
        <el-input
          placeholder="请输入内容"
          type="password"
          v-model="user.password"
          style="width:200px"
        />
      </div>
      <div>
        <el-button @click="denglu()">登录</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { login } from "../utils/login";

export default {
  data() {
    return {
      user: {
        username: "",
        password: ""
      },
      token: "",
      stu: {
        stuName: "",
        stu: ""
      },
      tableData: []
    };
  },

  methods: {
    denglu() {
      let params = {
        username: this.user.username,
        password: this.user.password
      };

      login(params).then(res => {
        if (typeof (res.data.data.token) === undefined) {
          alert("账号或密码错误");
          return;
        } else {
          localStorage.setItem("token", res.data.data.token);
          alert("登录成功");
          this.$router.push("/lab6");
        }
      });
    }
  }
};
</script>
<style scoped>
.wrapper {
  display: inline-block;
}
input {
  display: inline-block;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  align-items: center;
  width: 500px;
}
</style>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值