利用Vant完成登录页面！

最新推荐文章于 2025-04-18 14:57:53 发布

laughable045

最新推荐文章于 2025-04-18 14:57:53 发布

阅读量6.3k

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_55633731/article/details/117637069

版权

本文介绍了如何利用Vant组件库完成登录页面的表单验证，通过发送AJAX请求实现登录功能，并讨论了Token的重要性和在Vuex中的管理。同时，解释了在doLogin中使用async关键字的原因，以及如何在axios请求拦截器中处理Token。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.表单验证：

使用vant组件库自带的表单校验功能（v-model ）做数据绑定，完成登录表单校验，

官网中的from表单组件找到合适代码复制，修改

2.登录-发ajax请求做登录

2.1按接口要求和axios的格式来完成代码先封装用户登录方法，然后在login.vue中调用

import request from '@/utils/request.js'

export const login = (user) => {
  return request({
    url: '', // 按接口地址填写
    method: 'POST', 'GET' // 请求方式
    // 如果参数通过请求体来发(post)，就用data
    // 如果参数通过请求行来发(get)，就用params
    data: user
  })
}

2.2 在login.vue中调用

export default {
  name: 'login',
async doLogin () {
  // 做具体的ajax提交动作
  try {
    const res = await login(this.user)
    console.log(res)
    alert('登录成功')
  } catch (err) {
    console.log(err)
    alert('登录失败')
  }
},
  onSubmit (values) {
    // console.log('submit', values)
    this.doLogin()
  }
}

3.token的作用

Token，就是令牌，最大的特点就是随机性，不可预测。

它是由后端接口提供的
一般在用户登陆时，由后端接口返回

Token一般用在两个地方:

1)防止表单重复提交、
2)anti csrf攻击（跨站点请求伪造）。

3.1把token保存在vuex

3.2：doLogin中为什么要写async

不写的结果

代码从doLogin()上往下进行时，首先打印（1），
await this.$store.dispatch('userLogin', this.user) 会进到（2）这边来整个右面是async 修饰是一个异步动作要等login回来
但是doLogin()并没有声明，代码直接回doLogin()执行（4）执行完后再返回执行回调

加上之后

加上asyns 后代码执行的时会等，右侧代码全部执行完后才返回左侧

4.axios的请求拦截器：

axios有一个请求拦截器机制，所有的axios请求在发出来之前都会经过 请求拦截器，拦截器
在axios请求拦截器中添加token
之前已经把token保存在了vuex中，这里只要在发出请求之前检查vuex中是否有token信息，有就直接加在headers中。

// 1. 基地址
const request = axios.create({
 
  baseURL: 'http://localhost:8080' // 本机的
 
})


// 请求拦截器
request.interceptors.request.use(function (config) {

  console.log('如何取出vuex中保存的数据？', store)
  const token = store.state.tokenInfo.token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
 
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})