当前位置：首页 > wzjs >正文

如果是创建的网站做网站费用分几块

wzjs 2025/9/23 5:56:08

如果是创建的网站,做网站费用分几块,广州自助网站设计平台,前台登录wordpress使用 UniApp 实现登录状态管理与持久化前言在移动应用开发中，登录状态的管理与持久化是保障用户体验和数据安全的基础。无论是社交、购物还是工具类App，用户登录后的身份验证、会话保持、自动续签等都离不开合理的状态管理。本文将以 UniApp 为例&am…

使用 UniApp 实现登录状态管理与持久化

前言

在移动应用开发中，登录状态的管理与持久化是保障用户体验和数据安全的基础。无论是社交、购物还是工具类App，用户登录后的身份验证、会话保持、自动续签等都离不开合理的状态管理。本文将以 UniApp 为例，详细讲解如何实现登录状态的管理与持久化，并结合鸿蒙（HarmonyOS）平台的适配与优化建议。

一、需求与设计思路

1. 需求分析

登录后保存用户身份信息，支持自动登录
支持退出登录，清除相关数据
登录状态全局可用，便于页面间访问
数据持久化，兼容鸿蒙平台的本地存储
安全性考虑，防止敏感信息泄露

2. 设计思路

使用 Vuex 或全局变量管理登录状态
结合 uni.setStorageSync/uni.getStorageSync 实现本地持久化
登录、登出时同步更新内存与本地存储
页面加载时自动检测并恢复登录状态
结合拦截器或导航守卫，保护需要登录的页面

二、核心代码实现

1. Vuex 状态管理

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);const store = new Vuex.Store({state: {userInfo: null, // 用户信息token: '',      // 登录令牌},mutations: {setUser(state, payload) {state.userInfo = payload.userInfo;state.token = payload.token;},clearUser(state) {state.userInfo = null;state.token = '';},},actions: {login({ commit }, { userInfo, token }) {commit('setUser', { userInfo, token });uni.setStorageSync('userInfo', userInfo);uni.setStorageSync('token', token);},logout({ commit }) {commit('clearUser');uni.removeStorageSync('userInfo');uni.removeStorageSync('token');},restore({ commit }) {const userInfo = uni.getStorageSync('userInfo');const token = uni.getStorageSync('token');if (userInfo && token) {commit('setUser', { userInfo, token });}},},
});export default store;

2. 登录与登出逻辑

// 登录页面示例
methods: {async doLogin() {// 这里以模拟接口为例，实际应调用后端APIconst res = await uni.request({url: 'https://api.example.com/login',method: 'POST',data: { username: this.username, password: this.password },});if (res.data && res.data.token) {this.$store.dispatch('login', {userInfo: res.data.userInfo,token: res.data.token,});uni.showToast({ title: '登录成功', icon: 'success' });uni.navigateBack();} else {uni.showToast({ title: '登录失败', icon: 'none' });}},doLogout() {this.$store.dispatch('logout');uni.showToast({ title: '已退出登录', icon: 'none' });uni.reLaunch({ url: '/pages/login/login' });},
}

3. 页面自动恢复登录状态

// App.vue
onLaunch() {this.$store.dispatch('restore');
}

4. 路由守卫保护页面

// main.js
import store from './store';uni.addInterceptor('navigateTo', {invoke(e) {// 需要登录的页面路径const protectedPages = ['/pages/user/profile', '/pages/order/list'];if (protectedPages.includes(e.url) && !store.state.token) {uni.showToast({ title: '请先登录', icon: 'none' });setTimeout(() => {uni.navigateTo({ url: '/pages/login/login' });}, 500);return false;}return true;},
});