uni-app微信小程序登錄流程實戰詳解

作為前端開發者，理解微信小程序的登錄流程對構建用戶認證系統至關重要。本文將從前端開發角度，詳細介紹如何在uni-app框架下實現微信小程序的登錄流程，包括獲取登錄憑證、發送登錄請求、管理登錄狀態等關鍵環節。

微信小程序登錄流程概述

微信小程序的前端登錄流程主要包括以下幾個步驟：

1. 調用 uni.login() 獲取登錄憑證（code）
2. 將 code 發送到自己的業務服務器
3. 接收服務器返回的登錄態（token）
4. 保存并管理登錄態
5. 在后續請求中使用登錄態

接下來，我們將詳細解析每個步驟的實現。

1. 獲取登錄憑證（code）

在小程序啟動時，我們首先需要調用 uni.login() 方法獲取登錄憑證（code）：

// 獲取微信登錄憑證
function getWxLoginCode() {return new Promise((resolve, reject) => {uni.login({provider: 'weixin',success: (res) => {if (res.code) {console.log('登錄憑證獲取成功');resolve(res.code);} else {console.error('登錄憑證獲取失敗：', res.errMsg);reject(new Error(res.errMsg));}},fail: (err) => {console.error('登錄接口調用失敗：', err);reject(err);}});});
}

這段代碼封裝了 uni.login() 方法，返回一個 Promise 對象，便于我們使用 async/await 語法處理異步流程。

2. 發送登錄請求

獲取到 code 后，我們需要將其發送到自己的業務服務器，以換取自定義登錄態：

// 發送登錄請求
async function login() {try {// 顯示加載提示uni.showLoading({title: '登錄中...'});// 獲取微信登錄憑證const code = await getWxLoginCode();// 發送登錄請求const result = await request({url: '/api/user/login',method: 'POST',data: { code }});// 處理登錄結果if (result.code === 0 && result.data) {// 登錄成功，保存登錄態saveLoginState(result.data);return result.data;} else {// 登錄失敗uni.showToast({title: result.msg || '登錄失敗',icon: 'none'});return null;}} catch (error) {// 處理錯誤console.error('登錄過程發生錯誤：', error);uni.showToast({title: '登錄失敗，請重試',icon: 'none'});return null;} finally {// 隱藏加載提示uni.hideLoading();}
}

這段代碼完成了以下工作：

• 調用 getWxLoginCode() 獲取登錄憑證
• 將 code 發送到業務服務器
• 處理服務器返回的登錄結果
• 提供用戶友好的反饋（加載提示、錯誤提示）

3. 保存登錄態

當服務器返回登錄態（通常是 token）后，我們需要將其保存起來：

// 保存登錄狀態
function saveLoginState(loginData) {// 保存 token 到本地存儲uni.setStorageSync('token', loginData.token);// 保存用戶信息if (loginData.userInfo) {uni.setStorageSync('userInfo', loginData.userInfo);}// 記錄登錄時間uni.setStorageSync('loginTime', Date.now());console.log('登錄狀態已保存');
}

在這里，我們使用 uni-app 提供的存儲 API 保存了 token、用戶信息和登錄時間。這些信息將在后續的請求和頁面中使用。

4. 登錄狀態管理

為了有效管理登錄狀態，我們需要提供一套完整的工具函數：

// 檢查是否已登錄
function isLoggedIn() {return !!uni.getStorageSync('token');
}// 獲取當前token
function getToken() {return uni.getStorageSync('token') || '';
}// 獲取用戶信息
function getUserInfo() {return uni.getStorageSync('userInfo') || null;
}// 清除登錄狀態
function clearLoginState() {uni.removeStorageSync('token');uni.removeStorageSync('userInfo');uni.removeStorageSync('loginTime');
}// 檢查登錄是否過期
function isLoginExpired() {const loginTime = uni.getStorageSync('loginTime') || 0;const currentTime = Date.now();// 假設登錄有效期為7天const expiresIn = 7 * 24 * 60 * 60 * 1000;return currentTime - loginTime > expiresIn;
}// 刷新登錄狀態
async function refreshLogin() {if (isLoginExpired()) {clearLoginState();return await login();}return true;
}

這組函數提供了：

• 檢查用戶是否已登錄
• 獲取 token 和用戶信息
• 清除登錄狀態
• 檢查登錄是否過期
• 刷新登錄狀態

5. 應用登錄狀態

有了上述工具函數，我們需要在應用中合理使用它們：

請求攔截器中添加 token

// 請求攔截器
const request = (options) => {// 克隆原始選項const requestOptions = {...options,header: options.header || {}};// 添加 token 到請求頭const token = getToken();if (token) {requestOptions.header.Authorization = `Bearer ${token}`;}// 發送請求return new Promise((resolve, reject) => {uni.request({...requestOptions,success: (res) => {// 檢查響應狀態if (res.statusCode === 200) {resolve(res.data);} else if (res.statusCode === 401) {// token 無效或過期handleUnauthorized();reject(new Error('未授權'));} else {reject(res);}},fail: (err) => {reject(err);}});});
};// 處理未授權情況
function handleUnauthorized() {// 清除登錄狀態clearLoginState();// 提示用戶uni.showToast({title: '登錄已過期，請重新登錄',icon: 'none'});// 跳轉到登錄頁setTimeout(() => {uni.navigateTo({url: '/pages/login/login'});}, 1500);
}

這個請求攔截器確保了：

• 每個請求都帶上 token
• 處理 401 未授權響應
• 在 token 無效時引導用戶重新登錄

自動登錄

在應用啟動時，我們可以實現自動登錄功能：

// App.vue 的 onLaunch 鉤子
export default {async onLaunch() {// 檢查本地是否有登錄態if (isLoggedIn()) {// 檢查登錄是否過期if (isLoginExpired()) {console.log('登錄已過期，嘗試重新登錄');await login();} else {console.log('已登錄狀態');}} else {console.log('未登錄狀態');await login();}}
}

這段代碼在應用啟動時檢查登錄狀態，并在必要時進行自動登錄。

頁面路由守衛

在需要登錄才能訪問的頁面，我們可以添加路由守衛：

// 需要登錄的頁面
export default {onLoad() {this.checkLogin();},methods: {checkLogin() {if (!isLoggedIn()) {uni.showToast({title: '請先登錄',icon: 'none'});// 跳轉到登錄頁setTimeout(() => {uni.navigateTo({url: '/pages/login/login'});}, 1500);return false;}return true;}}
}

使用 Vuex 集中管理登錄狀態

為了更好地管理狀態，我們可以使用 Vuex：

// store/modules/user.js
const state = {token: uni.getStorageSync('token') || '',userInfo: uni.getStorageSync('userInfo') || null
};const mutations = {SET_TOKEN(state, token) {state.token = token;uni.setStorageSync('token', token);},SET_USER_INFO(state, userInfo) {state.userInfo = userInfo;uni.setStorageSync('userInfo', userInfo);},CLEAR_USER(state) {state.token = '';state.userInfo = null;uni.removeStorageSync('token');uni.removeStorageSync('userInfo');uni.removeStorageSync('loginTime');}
};const actions = {// 登錄async login({ commit }) {try {uni.showLoading({ title: '登錄中...' });// 獲取微信登錄憑證const code = await getWxLoginCode();// 發送登錄請求const result = await request({url: '/api/user/login',method: 'POST',data: { code }});if (result.code === 0 && result.data) {// 保存登錄狀態commit('SET_TOKEN', result.data.token);commit('SET_USER_INFO', result.data.userInfo);uni.setStorageSync('loginTime', Date.now());return result.data;} else {uni.showToast({title: result.msg || '登錄失敗',icon: 'none'});return null;}} catch (error) {console.error('登錄失敗', error);uni.showToast({title: '登錄失敗，請重試',icon: 'none'});return null;} finally {uni.hideLoading();}},// 登出logout({ commit }) {commit('CLEAR_USER');uni.reLaunch({url: '/pages/login/login'});},// 檢查登錄狀態checkLogin({ state, dispatch }) {if (!state.token) {return false;}const loginTime = uni.getStorageSync('loginTime') || 0;const currentTime = Date.now();const expiresIn = 7 * 24 * 60 * 60 * 1000;if (currentTime - loginTime > expiresIn) {// 登錄過期，重新登錄return dispatch('login');}return true;}
};export default {namespaced: true,state,mutations,actions
};

使用 Vuex 管理登錄狀態有以下優勢：

• 集中管理狀態
• 狀態變化更加可預測
• 方便組件之間共享狀態
• 提供統一的 API 接口

登錄組件示例

最后，我們來看一個完整的登錄組件示例：

<!-- pages/login/login.vue -->
<template><view class="login-container"><image class="logo" src="/static/logo.png"></image><view class="welcome">歡迎使用向明天小程序</view><button class="login-btn" type="primary" :loading="loading"@click="handleLogin">微信一鍵登錄</button><view class="tips">登錄后即可使用完整功能</view></view>
</template><script>
import { mapActions } from 'vuex';export default {data() {return {loading: false};},methods: {...mapActions('user', ['login']),async handleLogin() {this.loading = true;try {const result = await this.login();if (result) {uni.showToast({title: '登錄成功',icon: 'success'});// 登錄成功后跳轉setTimeout(() => {const redirectUrl = uni.getStorageSync('redirectUrl') || '/pages/index/index';uni.reLaunch({url: redirectUrl});uni.removeStorageSync('redirectUrl');}, 1500);}} catch (error) {console.error('登錄操作失敗', error);} finally {this.loading = false;}}}
};
</script><style>
.login-container {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 60rpx;height: 100vh;background-color: #f8f8f8;
}.logo {width: 200rpx;height: 200rpx;margin-bottom: 40rpx;
}.welcome {font-size: 36rpx;font-weight: bold;margin-bottom: 80rpx;color: #333;
}.login-btn {width: 80%;height: 88rpx;line-height: 88rpx;border-radius: 44rpx;font-size: 32rpx;background-color: #07c160;
}.tips {margin-top: 40rpx;font-size: 28rpx;color: #999;
}
</style>

登錄流程最佳實踐

1. 靜默登錄：在用戶無感知的情況下完成登錄流程，提升用戶體驗。

2. 登錄狀態檢查：在應用啟動和頁面切換時檢查登錄狀態，確保用戶處于登錄狀態。

3. 錯誤處理：提供友好的錯誤提示，引導用戶成功完成登錄。

4. 登錄重試：在登錄失敗時提供重試機制。

5. 登錄過期處理：及時處理登錄過期情況，引導用戶重新登錄。

6. 登錄態持久化：使用適當的存儲方式保存登錄態，確保用戶下次打開應用時能夠保持登錄狀態。

7. 登錄態安全：不在前端存儲敏感信息，設置合理的 token 過期時間。

總結

作為前端開發者，實現微信小程序登錄流程需要關注以下關鍵點：

1. 正確調用 uni.login() 獲取登錄憑證
2. 將登錄憑證發送到業務服務器換取登錄態
3. 安全地保存和管理登錄態
4. 在網絡請求中使用登錄態
5. 處理登錄過期和未授權情況
6. 優化用戶登錄體驗

通過本文介紹的方法和最佳實踐，你應該能夠在 uni-app 項目中實現一個完整、安全、用戶友好的微信小程序登錄流程。

希望這篇文章對你實現微信小程序登錄功能有所幫助！