Vue登陆拦截

第一步：在src文件下创建utils文件夹并写入文件

import axios from 'axios'       //提前安装axios不要忘了
// 配置全局拦截
axios.interceptors.request.use((req) => {
  // console.log(req)
  return req
})
axios.interceptors.response.use((res) => {
  return res
})
// 声明通用的请求方法
async function request(options) {
  if (!options.method) {
    options.method = 'get'
  }
  if (options.method === 'get' || options.method === 'delete') {
    options.params = options.data
  }
  try {
    let { data: res } = await axios(options)
    return res
  } catch (error) {
    console.log(error)
    return { code: 500, msg: error.message, data: null }
  }
}
export default request

 第二步：写登陆页

                           <!-- 文件名：Login  -->
                           <!-- 文件名：Login  -->
<template>
  <div class="login">
    <form action="javascript:void(0)" @submit="login" class="form">
      <div class="form-item">
        <label for="username">username</label>
        <input type="text" id="username" v-model="username" />
      </div>
      <div class="form-item">
        <label for="password">password</label>
        <input type="text" id="password" v-model="password" />
      </div>
      <div class="form-item">
        <input type="submit" value="登录" />
        <input type="reset" @click="reset" value="重置" />
      </div>
    </form>
  </div>
</template>
                            <!-- 文件名：Login  -->
                            <!-- 文件名：Login  -->

第三步：在 router 文件下的 index.js 中配置路由