之前用vue实现一个网站的登录功能,这里做一个记录和总结,以下是需要实现的登录业务描述:
1.输入用户名和密码,点击登录按钮,若两者匹配,即可进入首页,首页展示登录用户的信息;
2.当用户登录后,无法访问登录页;
3.用户未登录,无法访问需要登录才能展示的页面,此时需要跳转到登录页面,当登录成功后,直接跳转到刚才用户点击访问的页面。
一.基本的登录功能实现
首先简单介绍登录的逻辑,顺序图如下:
登录按钮绑定点击事件handleLogin,先要做前端验证,就是检查用户名和密码的规范性,可以按照需求具体问题具体分析,比如做正则判断,或者发送请求验证是否存在等,这里不详细实现了,仅判断用户是否输入,之后派发vuex,action为userLogin,login.vue的主要代码如下:
data(){
return {
phone:'',
password:''
}
},
async handleLogin(){
const {phone,password} = this;
try {
phone && password && await this.$store.dispatch('userLogin',{phone,password});
let toPath = this.$route.query.redirect || 'home';
this.$router.push(toPath);
} catch (error) {
alert(error.message);
}
}
在userLogin里,调用封装好的reqLogin方法向后端接口发送登录请求,该请求的响应结果为两种类型,如果用户名和密码正确,返回token(验证用户信息的字符串),若登录失败,返回失败的原因。
这里使用async和await修饰符处理异步请求,async修饰的方法userLogin会返回一个Promise实例,这里可以通过userLogin返回的Promise是成功或失败告知login.vue组件登录行为的结果。当登录成功时,首先让vuex保存token,但是vuex数据刷新后会丢失,所以还需要将token信息保存在浏览器的本地存储中,返回一个非Promise的类型。登录失败,返回一个失败的Promise,并将失败的原因作为异常抛出。