使⽤uViewUI+UniApp开发⼩程序--判断⽤户是否登录并跳转
在《》的随笔中，介绍了基于uView UI+UniApp开发⼩程序的⼀些基础知识和准备⼯作，其中也⼤概介绍了⼀下基本的登录过程，本篇随笔详细介绍⼀下⼩程序的相关登录处理以及登录后设置⽤户⾝份信息，并跳转到相应页⾯的处理过程。
1、令牌判断和登录⽅式
在之前介绍过，在业务系统中，我们需要根据登录⽤户的⾝份获取对应的数据，如果⽤户没有登录，这些信息是⽆法获到的，那么我们可以在app.vue中判断⽤户是否登录，然后跳转到对应的页⾯，如下所⽰。
也就是系统启动的进⼊的时候，我们需要对系统⽤户的⾝份做⼀次判断，判断token是否存在，并且是否有效（因为token是有时效的）。
我们先来介绍下如何如何判断token是否存在的处理过程，由于token本⾝在登陆的时候，设置了存储，因此只需要通过uView的token获取操作即可读取出来，并进⾏判断即可。
我们只需要简单判断this.vuex_token 是否存在值即可，因为this.vuex_token是由于uView在加载Mixin的时候，已经⾃动映射了存储的键值，因此我们可以通过this.vuex_token访问到对应的值。
如果是简单的判断，我们在app.vue的如下代码即可处理
<script>
export default {
globalData: {
username: ''
},
onLaunch() {
//如果⽤户没有登录或令牌失效，跳转到登录界⾯
// console.log(this.vuex_token)
if(!this.vuex_token) {
this.$u.route({
url: 'pages/template/login/password'
});
} else {
uni.switchTab({
url: '/pages/example/myinfo'
});
}
},
}
</script>
不过我们需要通过判断它的时限有效性，那么通过判断失效⽇期进⾏处理，如下代码所⽰。
<script>
export default {
onLaunch() {
//如果⽤户没有登录或令牌失效，跳转到登录界⾯
// console.log(this.vuex_token)
console.log(this.$fig.baseUrl)
var authed = this.checkToken()
if(!authed) {
this.$u.route({
url: '/pages/task/login/index'
});
} else {
this.$u.route({
type:'tab',
url: 'pages/task/login/myinfo'
})
}
},
methods: {
checkToken() {
if(this.vuex_token && this.vuex_user) {
var expired = new Date(this.pired) //token过期时间
const now = w()
if(expired - now > 0) {
return true
}
}
return false
}
}
}
</script>
其中expired是我们获取到token的时间，并加上token的失效时间的。
我们这⾥使⽤了⼀个checkToken的函数，⽤来判断是否正常登录并且有效的，如果令牌⽆效，那么跳转到登陆界⾯，否则直接跳到个⼈信息页⾯下。
我们先来看看登录界⾯，我们这⾥提供了⼏种登录⽅式，账号密码登录、短信验证码登陆、授权登录⼏种⽅式。
这⼏种不同的登录⽅式，都是在验证成功后，需要获取⽤户的⾝份信息，并设置到Storage 存储中去，逻辑上有相同之处。
2、登录的处理逻辑
⽤户登录的时候，需要输⼊⽤户名，密码，构建相关的参数后，进⾏登录处理，处理过程代码如下所⽰。
submit() {
this .$refs.uForm.validate(valid => {
if  (valid) {
this .$u.api.User.login(this .model).then(data => {
// 登陆成功跳转到Tab 页⾯
uni.switchTab({
url: '/pages/task/login/myinfo'
});
});
} else  {
console.log('验证失败');
}
});
},
其中 this.$u.api.User 是⽤户API 接⼝的统⼀调⽤⽅式，其中http.api.js 的代码如下所⽰。
import User from  '../api/user.js'
import Task from  '../api/task.js'
const  install = (Vue, vm) => {
/
/ 将各个定义的接⼝名称，统⼀放进对象挂载到vm.$u.api(因为vm 就是this ，也即this.$u.api)下
vm.$u.api = { // 将 vm 对象传递到模块中
User: User(vm),
Task: Task(vm)
}
}
export default  { install }
其中api/user.js ⾥⾯定义了访问远程WebAPI 的操作，同时也是我们封装⼀些处理逻辑的操作函数，我们可以通过ES6的Promise 进⾏封装⼀个简单的登录函数。
由于我们这⾥登录过程，除了⽤户名密码外，还需要appid、时间戳以及签名参数等信息组合，因此构建参数⽐较多⼀点。
登录成功后，我们就调⽤resolve的执⾏即可，如果失败，调⽤reject的处理。
这样我们就可以直接通过Promise的操作处理登录成功后的操作了，如下代码所⽰。
this.$u.api.User.del).then(data => {
uni.switchTab({
url: '/pages/task/login/myinfo'
});
});
⽽其中setUserToken函数，主要是便于重⽤的⽬的抽取出来，因为设置令牌和⽤户信息，是其他两个登录⽅式（短信登陆、登陆）所通⽤的操作。
短信验证码的登录⽅式也是类似，需要后端配合判断短信的有效性即可，前端先调⽤后端的操作，如下代码所⽰
//验证码
var params = { PhoneNumber: l }
this.$u.api.User.SendPhoneLoginSmsCode(params).then(res => {
if(res.success) {
this.$u.toast(`验证码已发送⾄⼿机 ${l}，请注意查收！`)
this.$u.route({
url: 'pages/task/login/code',
params: {
l
}
});
} else {
this.$u.toast('发送出现错误：' + Message)
}
})
⽽前端调⽤的函数也就是在api/user.js中简单封装⼀下对API的调⽤即可。
app登录界面SendPhoneLoginSmsCode(data) { // 发送登录动态码
return vm.$u.post('/api/framework/User/SendPhoneLoginSmsCode', data)
},
发送的后端代码如下所⽰，主要就是放在缓存中⼀段时间供验证即可。
/// <summary>
/
// 发送登录动态码
/// </summary>
/// <returns></returns>
[AllowAnonymous]
public CommonResult SendPhoneLoginSmsCode(PhoneCaptchaModel model)
{
//获取随机6位数字动态验证码
var code = RandomChinese.GetRandomNumber(6);
//使⽤⾃定义模板处理短信发送
string message = string.Format(ConfigData.MySmsCodeTemplate, code);
var smsSender = new MySmsSender();
var result = smsSender.Send(model.PhoneNumber, message);
if (result.Success)
{
var cacheKey = model.PhoneNumber;//以⼿机号码作为键存储验证码缓存
var cacheItem = new SmsLoginCodeCacheItem { Code = code, PhoneNumber = model.PhoneNumber };
var cache = CacheManagerHelper.GetCacheItem(cacheKey, () =>
{
return cacheItem;
}, TimeSpan.FromMinutes(ConfigData.SmsCodeExpiredMinutes));
}
return result;
}
验证的时候，只需要判断缓存⾥⾯是否存在记录和对应验证码是否匹配即可，如果顺利通过，那么构建⽤户的token信息返回给前端就是。
如果前端发送验证码成功，那么登陆界⾯跳转到等待输⼊验证码的界⾯，如下所⽰。
输⼊正确的验证码即可顺利登陆，否则过期则要求重新验证码。
submit() {
var params = { mobile: bile, smscode: this.smscode };
console.log(params);
this.$u.api.User.dynamiclogin(params)
.then(res => {
this.$u.toast('验证成功');
uni.switchTab({
url: '/pages/task/login/myinfo'
});
})
.
catch(error => {
console.log('验证失败' + error);
this.$u.toast(error);
});
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。