UniApp登錄后如何實現頁面跳轉？

隨著移動設備普及，越來越多的開發者選擇使用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登錄跳轉頁面的功能，為應用的開發和用戶體驗提供更好的支持。