uniapp 登录功能

实现登录功能的基本流程

uniapp 的登录功能通常需要结合前端页面和后端接口实现。前端负责收集用户信息并发送请求，后端验证信息并返回登录状态。

前端页面设计

创建一个登录页面，包含用户名和密码输入框以及登录按钮。可以使用 uni-easyinput 或原生 input 组件。

<template>
  <view class="login-container">
    <uni-forms ref="form">
      <uni-forms-item name="username">
        <uni-easyinput v-model="form.username" placeholder="请输入用户名" />
      </uni-forms-item>
      <uni-forms-item name="password">
        <uni-easyinput type="password" v-model="form.password" placeholder="请输入密码" />
      </uni-forms-item>
    </uni-forms>
    <button @click="handleLogin">登录</button>
  </view>
</template>

数据绑定和方法定义

在 script 部分定义表单数据和登录方法。

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async handleLogin() {
      try {
        const res = await uni.request({
          url: 'https://your-api-endpoint/login',
          method: 'POST',
          data: this.form
        })
        if (res.data.code === 200) {
          uni.setStorageSync('token', res.data.token)
          uni.showToast({ title: '登录成功' })
          uni.navigateBack()
        }
      } catch (error) {
        uni.showToast({ title: '登录失败', icon: 'none' })
      }
    }
  }
}
</script>

后端接口对接

确保后端接口接收 username 和 password 参数，验证成功后返回 token 和用户信息。前端收到响应后存储 token 并跳转页面。

登录状态管理

使用 uni.getStorageSync 检查登录状态，在 App.vue 或全局拦截器中验证。

// 全局路由拦截
uni.addInterceptor('navigateTo', {
  invoke(args) {
    const token = uni.getStorageSync('token')
    if (!token && !args.url.includes('login')) {
      uni.redirectTo({ url: '/pages/login/login' })
      return false
    }
    return true
  }
})

第三方登录集成

如需微信登录，可使用 uni.login 获取 code 并发送至后端。

uni.login({
  provider: 'weixin',
  success(res) {
    uni.request({
      url: 'https://your-api-endpoint/wechat-login',
      method: 'POST',
      data: { code: res.code }
    })
  }
})

安全注意事项

密码传输应加密，建议使用 HTTPS 协议。token 设置合理过期时间，避免长期存储敏感信息。