uni 登录token方法_uni-app 中保持用户登录状态

在应用中保持登录状态是一个应用常见的需求，本文简单介绍下在 uni-app 中如何保存用户登录状态。

简介

uni-app 中不支持读写 cookie，所以不能如传统的应用那样通过读取 cookie 来判断是否是登录状态。

在 uni-app 进行登录操作时，可以将需要校验的数据放在 uni.request 的 data 中，也可以在 header 里设置 token，使用 token 进行登录状态校验。

流程：首页为未登录状态 => 进行登录 => 首页状态改变 => 退出应用再次进入仍然是已登录状态。

vuex

使用 vuex 进行管理登陆状态和保存用户信息，下面是部分代码。

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'

})

}

}

})

登录

在 login.vue(登录页面)输入用户名密码后，调用 uni.request 进行登录，登录成功后调用 vuex 的方法改变应用的登陆状态。

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'])

}

}

改变首页状态

通过 vuex 中保存的 hasLogin 判断是否是登录状态，从而显示不同的内容。

现在是未登录状态，点击按钮进行登录

现在是登录状态，您的用户id是：{{uerInfo.userName}}

{{hasLogin ? '退出登录' : '登录'}}

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'

})

}

}

}

}

再次进入应用

在 App.vue 中判断用户是否保存用户信息 "uerInfo"，如果保存则认为是登录状态，未保存则为未登录状态。

App.vue 中得到用户信息后需要同步改变 vuex 的状态，使所有页面都能共享登陆状态与用户信息。

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'])

}

}

附件为demo，可直接在 HBuilderX 中运行体验整个登录流程。