簡介
uni-app 中不支持讀寫 cookie豺瘤，所以不能如傳統(tǒng)的應(yīng)用那樣通過讀取 cookie 來判斷是否是登錄狀態(tài)少态。
流程
- 未登錄狀態(tài)
- 進(jìn)行登錄(后臺驗(yàn)證賬號密碼通過烦却，返回該賬號用戶名等信息)
- 狀態(tài)改變(將返回的賬號信息保存到本地)
- 為了個(gè)頁面共享賬號信息仔引，需要使用Vuex
const store = new Vuex.Store({
state: {
uerInfo: {},
hasLogin: false
},
mutations: {
login(state, provider) {//改變登錄狀態(tài)
state.hasLogin = true
//state.uerInfo.token = provider.token
state.uerInfo.userName = provider.user_name
uni.setStorage({//將用戶信息保存在本地
key: 'uerInfo',
data: provider
})
},
//退出登錄 務(wù)必清除登錄狀態(tài) 以及 本地用戶信息家厌，防止下次打開app重現(xiàn)播玖、以及出現(xiàn)不正確狀態(tài)
logout(state) {
state.hasLogin = false
state.uerInfo = {}
uni.removeStorage({
key: 'uerInfo'
})
}
}
})
- 退出應(yīng)用再次進(jìn)入仍然是已登錄狀態(tài)
- 在 App.vue 中判斷用戶是否保存用戶信息 "uerInfo"，如果保存則認(rèn)為是登錄狀態(tài)像街，未保存則為未登錄狀態(tài)黎棠。
onLaunch: function () {
uni.getStorage({//獲得保存在本地的用戶信息
key: 'uerInfo',
success:(res) => {
//獲取成功即說明本地有保存用戶數(shù)據(jù)晋渺，把res.data繼續(xù)給state.userInfo镰绎。并修改登錄狀態(tài)，由此達(dá)到登錄狀態(tài)
//this.login(res.data);
//uni.request({// 再次校驗(yàn)并刷新token的有效時(shí)間
//url: `${this.$serverUrl}/auth.php`,
//header: {
// "Content-Type": "application/x-www-form-urlencoded",
// "Token":res.data.token
//},
//data: {
// "username":res.data.user_name
//},
//method: "POST",
//success: (e) => {
// if (e.statusCode === 200 && e.data.code === 0) {
// this.login(e.data);
// }
//}
//})
}
});
},
此為簡化版木西，重在講述業(yè)務(wù)邏輯畴栖，實(shí)際開發(fā)中登錄需要嚴(yán)格驗(yàn)證，
返回的用戶信信息也會多種多樣八千。
