登录模块 (三) -进行登录-导入request工具函数-toast轻提示组件-mapMutations修改数据-this.$router.push（） 跳转方法

进行登录-导入request工具函数-toast轻提示组件-mapMutations修改数据-this.$router.push（） 跳转方法

toast轻提示组件：https://youzan.github.io/vant/#/zh-CN/toast

• 封装api src/api/user.js ——用户 相关的API调用

//注释js代码
/**
*登录
*@param{string}mobile - 手机号
*@param{string}code - 验证码
*/

//导入
import request from '@/utils/request'

export const login = ({ mobile, code }) => {
    //调用request函数  得到一个promise的对象  函数的3个参数-请求地址、请求方式、请求参数
  return request('app/v1_0/authorizations', 'post', { mobile, code })
}

• 进行登录 src/views/user/login.vue

import { login } from '@/api/user'
import { mapMutations } from 'vuex'

src/views/user/login.vue中的script里

...mapMutations(['setAuth']),
    
   async login () {
    this.validMobile()
    this.validCode()
    //判断校验结果
    if (this.errorMsg.mobile || this.errorMsg.code){
        //校验失败
        return false
    } 
    // 校验成功  进行登录
    try {
        //登录成功
        1.提示
        2.保存token
        3.根据地址栏是否有回跳的地址  如果有 回跳即可； 如果没有，回跳到个人中心/user
        
        //校验成功  进行登录
        const data = await login(this.userForm)
        //登录成功 1.提示
         this.$toast({ type: 'success', message: '登录成功' })
        // 2.保存设置 token
        this.setAuth(data)
        //3. 回跳来源地址  如果没有  进入个人中心 this.$router.push（） 跳转方法
        this.$router.push(this.$route.query.redirect || '/user')
    } catch (e) {
        //4.错误提示
        this.$toast({ type: 'fail', message: '手机号或验证码错误' })
    }
}