uni-app 中如何管理用户登录状态

浮动尘 發表於 2020-4-17 17:04:00

<h3>简介</h3>
uni-app 中不支持读写 cookie，所以不能如传统的应用那样通过读取 cookie 来判断是否是登录状态。
在 uni-app 进行登录操作时，可以将需要校验的数据放在 uni.request 的 data 中，也可以在 header 里设置 token，使用 token 进行登录状态校验。
流程：首页为未登录状态 => 进行登录 => 首页状态改变 => 退出应用再次进入仍然是已登录状态。
<h3>vuex</h3>
使用 vuex 进行管理登陆状态和保存用户信息，下面是部分代码。
<div class="cnblogs_code">
<pre>const store = new Vuex.Store({
state: {
 uerInfo: {},
 hasLogin: false
},
mutations: {
 login(state, provider) {//改变登录状态
 state.hasLogin = true
 state.uerInfo.token = provider.token
 state.uerInfo.userName = provider.user_name
 uni.setStorage({//将用户信息保存在本地
 key: 'uerInfo',
 data: provider
 })
 },
 logout(state) {//退出登录
 state.hasLogin = false
 state.uerInfo = {}
 uni.removeStorage({
 key: 'uerInfo'
 })
 }
}
})</pre>
</div>
<h3>登录</h3>
在 login.vue（登录页面）输入用户名密码后，调用 uni.request 进行登录，登录成功后调用 vuex 的方法改变应用的登陆状态。
<div class="cnblogs_code">
<pre><script>
import {
 mapMutations
} from 'vuex';
export default {
 methods: {
 bindLogin(e) {
 let name = e.detail.value.nameValue,
 password = e.detail.value.passwordValue;
 uni.request({
 url: `${this.$serverUrl}/login.php`,
 header: {
 "Content-Type": "application/x-www-form-urlencoded"
 },
 data: {
 "username": name,
 "password": password
 },
 method: "POST",
 success: (e) => {
 if (e.data.code === 0) {//登录成功后改变vuex的状态，并退出登录页面
 this.login(e.data)
 uni.navigateBack()
 }
 }
 })
 },
 ...mapMutations(['login'])
 }
}
</script></pre>
</div>
<h3>改变首页状态</h3>
通过 vuex 中保存的 hasLogin 判断是否是登录状态，从而显示不同的内容。
<div class="cnblogs_code">
<pre><template>
<view class="page">
 <view v-if="!hasLogin">现在是未登录状态，点击按钮进行登录</view>
 <view v-else>现在是登录状态，您的用户id是：{{uerInfo.userName}}</view>
 <button type="primary" @click="bindLogin">{{hasLogin ? '退出登录' : '登录'}}</button>
</view>
</template>
<script>
import {
 mapState,
 mapMutations
} from 'vuex';
export default {
 computed: mapState(['hasLogin','uerInfo']),
 methods: {
 ...mapMutations(['logout']),
 bindLogin() {
 if (this.hasLogin) {
 this.logout()
 } else {
 uni.navigateTo({
 url: '/pages/login/login'
 })
 }
 }
 }
}
</script></pre>
</div>
<h3>再次进入应用</h3>
在 App.vue 中判断用户是否保存用户信息 "uerInfo"，如果保存则认为是登录状态，未保存则为未登录状态。
App.vue 中得到用户信息后需要同步改变 vuex 的状态，使所有页面都能共享登陆状态与用户信息。
<div class="cnblogs_code">
<pre><script>
import {
 mapMutations
} from 'vuex';
export default {
 onLaunch: function () {
 uni.getStorage({//获得保存在本地的用户信息
 key: 'uerInfo',
 success:(res) => {
 this.login(res.data);
 uni.request({// 再次校验并刷新token的有效时间
 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);
 }
 }
 })
 }
 });
 },
 methods: {
 ...mapMutations(['login'])
 }
}
</script></pre>
</div>
这里有一个demo,在我的码云里，需要的话可以down下来看看，能跑 
来源：https://www.cnblogs.com/fxwoniu/p/12721111.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 中如何管理用户登录状态