在UniApp中保存登录状态,通常涉及到以下几个步骤:
-
进行登录:用户在登录页面输入用户名和密码,通过调用
uni.request
向服务器发送登录请求。如果服务器验证账号密码通过,会返回该账号的用户名等信息以及一个用于身份验证的令牌(通常是Token). -
保存登录状态和用户信息:登录成功后,可以使用
uni.setStorage
或uni.setStorageSync
方法将用户信息和Token保存到本地存储中。这样,即使用户退出应用或应用被关闭,登录状态和用户信息也能被保留. -
使用Vuex管理登录状态:为了在应用的多个页面中共享登录状态和用户信息,可以使用Vuex进行状态管理。在Vuex的
state
中定义userInfo
和hasLogin
等状态,通过mutations
中的方法(如login
和logout
)来更新这些状态。登录成功后,调用login
方法更新状态,并将用户信息保存到本地存储。退出登录时,调用logout
方法清除状态和本地存储中的用户信息. -
校验登录状态:在应用启动或访问需要登录的页面时,可以通过检查本地存储中的Token或Vuex中的登录状态来判断用户是否已登录。如果Token不存在或登录状态为
false
,则引导用户跳转到登录页面.
以下是使用Vuex管理登录状态和保存用户信息的代码示例:
const store = new Vuex.Store({
state: {
userInfo: {},
hasLogin: false
},
mutations: {
login(state, provider) {
state.hasLogin = true;
state.userInfo.token = provider.token;
state.userInfo.userName = provider.user_name;
uni.setStorage({
key: 'userInfo',
data: provider
});
},
logout(state) {
state.hasLogin = false;
state.userInfo = {};
uni.removeStorage({
key: 'userInfo'
});
}
}
});
在这个示例中,登录成功后,调用login
方法更新Vuex状态,并将用户信息保存到本地存储。退出登录时,调用logout
方法清除状态和本地存储中的用户信息.
综上所述,通过将用户信息和Token保存到本地存储,并使用Vuex进行状态管理,可以在UniApp中有效地保存和管理登录状态.