Axios 请求拦截器

1. 步骤

• form表单提交账号密码

• 提交成功

• validate 对整个表单的内容进行验证。 接收一个回调函数，或返回 Promise。 (callback?: (isValid: boolean, invalidFields?: ValidateFieldsError) => void) => Promise

  formRef.value.validate((valid) => {
  if (!valid) {
  console.log('验证不通过')
  return false
  }

• cookies 存储admin-token值

• 请求拦截器获取cookies中admin-token的值

• 将admin-token添加给响应头中的token进行验证

2. axios.js

// cookie-token-导入-01
import { useCookies } from '@vueuse/integrations/useCookies'

// 添加请求拦截器
service.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    // 往header头自动添加token
    // cookie-token-定义响应式对象-02
    const cookie = useCookies()
    // cookie-token-使用get方法获取token-03
    const token =  cookie.get('admin-token')
    if(token){
        config.headers["token"] = token
    }
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

2. login.vue

# 表单提交
const onSubmit = () => {
  formRef.value.validate((valid) => {
    if (!valid) {
      console.log('验证不通过')
      return false
    }
    // console.log("验证通过");
    login(form.username, form.password)
      // .then 请求成功
      .then((res) => {
        console.log(res)

        // 提示登陆成功
        ElNotification({
          message: '登陆成功' || '请求失败',
          type: 'success',
          duration: 3000,
        })
        // 存储token
        // cookie-token-定义响应式对象-02
        const cookie = useCookies()
        // cookie-token-使用set方法设置token-03
        cookie.set('admin-token', res.token)

        // 获取相关信息
        getinfo().then((res2)=>{
          console.log(res2);
        })
        
        // 路由跳转-跳转到后台首页-03
        router.push('/')
      })