登录功能实现大体流程

axios配置

安装

使用 npm:

$ npm install axios 

axios实例 配置 axios.js

import axios from "axios";

const service = axios.create({
  baseURL:"/api"

})

export default service

登录api接口设置 注意根据文档看要传哪些值 我这个只需传入username和password

import axios from '@/axios'

export function login(username,password){
  return axios.post(
    '/admin/login',
    {
      username,
      password
    }
  )
}

useCookies 安装使用

npm i @vueuse/integrations

npm i universal-cookie
// 引入
import { useCookies } from '@vueuse/integrations/useCookies'

表单验证部分 使用的element Plus表单

// 给登录按钮设置 :loading="loading" 以免点击太快 发送过多请求
// 表单验证 需要向服务器传入用户名和密码
const loading = ref(false)
// 表单验证 需要向服务器传入用户名和密码
const onSubmit = () => {
  // validate对整个表单的内容进行验证。 接收一个回调函数，或返回 Promise
  formRef.value.validate((valid) => {
    if (!valid) {
      return false
    }
    loading.value = true
    login(form.username, form.password)
    .then(res => {
      console.log(res);
      // 提示成功信息
      ElNotification({
        type: 'success',
        message: '恭喜！登陆成功!' || '登录失败',
        duration: 3000
      })
      // 需要存储用户token和用户信息
      const cookie = useCookies()
      // 将token存到cookie中 直接res.token 在拦截器中已经优化
      cookie.set("admin-token",res.token)

      // 获取用户信息
      getInfo().then(res2 => {
        console.log(res2);
      })
      // 跳转到后台首页
      router.push('/')
     }).finally(()=>{
        loading.value = false
     })
  })
}