UniApp登录后如何实现页面跳转？

矫情吗；* 2024-04-29 11:34 75阅读 0赞

随着移动设备普及，越来越多的开发者选择使用uniapp来构建他们的应用。uniapp的跨平台特性大大提高了开发效率，简化了应用的运营和维护工作。在uniapp应用中，登录跳转页面是一个重要的功能，它能够确保用户安全地访问应用内的敏感信息。下面我们将详细探讨如何实现uniapp登录跳转页面的具体步骤。

首先创建一个登录页面，可以使用uniapp提供的模板，也可以自行编写代码进行实现。

在登录页面中，需要引入uniapp官方提供的登录组件，其代码如下：

<template>
      <view>
        <form>
          <input type="text" v-model="account" placeholder="请输入账号"/>
          <input type="password" v-model="password" placeholder="请输入密码"/>
          <button type="submit" @click="login">登录</button>
        </form>
      </view>
    </template>
    
    <script>
      import { login } from '@/api/user'
    
      export default {
        data() {
          return {
            account: '',
            password: ''
          }
        },
        methods: {
          async login() {
            // 调用登录接口，接口返回登录状态
            const res = await login({ account: this.account, password: this.password })
    
            // 如果登录成功，就跳转到主页
            if (res.code === 200) {
              uni.switchTab({ url: '/pages/index' })
            } else {
              uni.showToast({
                title: '登录失败',
                icon: 'none'
              })
            }
          }
        }
      }
    </script>

在上述代码中，我们编写了一个基本的登录表单，并在表单提交时调用了登录接口，如果登录成功，则跳转到主页；登录失败，则弹窗提示登录失败。

在登录接口中，我们需要进行账号密码的校验，检查用户输入的账号和密码是否正确，如果正确则返回登录成功的状态码，并携带用户信息返回；否则返回登录失败的状态码和错误信息。

import request from '@/utils/request'
    
    // 登录接口
    export function login(data) {
      return request({
        url: '/login',
        method: 'post',
        data
      })
    }

在上述代码中，我们使用了uniapp官方推荐的网络请求库request来进行请求的发送，同时我们需要根据后端接口的要求来进行数据的传输和加密。

在主页中，我们需要对用户的登录状态进行判断，如果用户已登录，则显示用户的信息；如果用户未登录，则跳转到登录页面进行登录。

<template>
      <view>
        <text v-if="isLogin">欢迎你，{
       { userInfo.name }}</text>
        <view v-else>
          <text>请先登录</text>
          <button @click="gotoLogin">去登录</button>
        </view>
      </view>
    </template>
    
    <script>
      export default {
        data() {
          return {
            isLogin: false,
            userInfo: {}
          }
        },
        onLoad() {
          // 判断用户是否已登录
          this.checkLogin()
        },
        methods: {
          checkLogin() {
            // 检查本地存储中是否存在登录信息
            const loginInfo = uni.getStorageSync('loginInfo')
            if (loginInfo && loginInfo.isLogin) {
              this.isLogin = true
              this.userInfo = loginInfo.userInfo
            }
          },
          gotoLogin() {
            // 跳转到登录页面
            uni.navigateTo({ url: '/pages/login' })
          }
        }
      }
    </script>

在上述代码中，我们通过checkLogin方法检查本地存储中是否存在登录信息，如果存在，则将isLogin设置为true，并且将userInfo设置为本地存储中的用户信息；否则将isLogin设置为false，表示用户未登录。如果用户未登录，则可以通过gotoLogin方法跳转到登录页面进行登录操作。

在登录成功后，我们需要将登录状态和用户信息保存到本地存储中，以便下次打开应用时可以自动登录。

async login() {
      // 调用登录接口，接口返回登录状态
      const res = await login({ account: this.account, password: this.password })
    
      // 如果登录成功，就跳转到主页
      if (res.code === 200) {
        // 保存登录状态和用户信息到本地存储中
        uni.setStorageSync('loginInfo', { isLogin: true, userInfo: res.data.userInfo })
        uni.switchTab({ url: '/pages/index' })
      } else {
        uni.showToast({
          title: '登录失败',
          icon: 'none'
        })
      }
    }

在上述代码中，我们使用uniapp提供的本地存储API来进行状态的保存和读取，以e‘setStorageSync’和‘getStorageSync’为例。通过这种方式，我们可以实现uniapp登录跳转页面的功能，为应用的开发和用户体验提供更好的支持。