极客园pc项目总结一 登录功能

极客园pc项目总结一 登录功能

1.utils中request封装

import axios from 'axios'

const instance=axios.create({
    baseURL: 'http://geek.itheima.net/v1_0/',
    timeout: 5000,
})

// 请求拦截器
instance.interceptors.request.use(function (config) {
    return config;
}, function (error) {
    return Promise.reject(error);
});

// 响应拦截器
instance.interceptors.response.use(function (response) {
    return response.data;  //返回response.data  减少请求返回多写一层data
}, function (error) {
    return Promise.reject(error);
});

export default instance;

2.login api封装

import request from 'utils/request'

/**
 * 登录请求，用于用户登录
 * @param {string} mobile 手机号
 * @param {string} code 验证码
 * @returns  Promise
 */

export const login = (mobile,code) => {
  return request({
      method:'post',
      url:'/authorizations',
      data:{
          mobile,
          code
      }
  })
}

3.表单提交请求

 const onFinish = async ({mobile, code}) => {
        try {
            const res = await login(mobile, code)
            const {token}=res.data
            //把token保存起来
            localStorage.setItem('token',token)
            //跳转到首页
            navigate('/home')  //react-router-dom  v6的页面跳转
            message.success('登录成功')
        } catch (error) {
            // const {message}=error.response.data
            message.warning(error.response.data.message)
        }

    }