在学习node express 过程中,使用express实现后端服务,vue vuex作为前端,实现前端实现登录功能,后端token生成+token验证。刷新,用户信息依然存在。
首先前端登录post数据:后端返回数据如果用户名密码正确,则把token存瑞sessionStrorage。
这样,存入临时存储--刷新页面信息仍然保留--窗口关闭数据消失。
submitForm () {
let $this = this;
if (this.loginForm.username === '' || this.loginForm.password === '') {
$this.$message({
showClose: true,
message: '账号或密码不能为空',
type: 'error'
})
return false
} else {
$this.$axios.post($this.BASE_URL+'/admin/users/login',this.loginForm) //get方法和post方法的区别是get有参数加‘params:’
.then((response)=>{
console.log('response',response);
let resp = response.data;
if(resp.status===0){
$this.$store.commit('set_token',resp.token); //本地存入token
$this.$message({
showClose: true,
message: '登录成功',
type:'success'
});
this.$router.push({path: '/admin/home'});
}else{
$this.$message({
showClose: true,
message: resp.message,
type: 'error'
})
}
}) }
},
当然,$this.$store.commit('set_token',resp.token); //本地存入token,这里用到了vuex,所以在store/index文件里mutations: {}对象里添加对应的,存入window.sessionStorage的方法
set_token(state,data){ //state中的全部数据
state.token = data;
window.sessionStorage.setItem('token',data); //临时存储--刷新保留--窗口关闭消失
},
set_user(state,data){
state.user = data;
window.sessionStorage.setItem('user',data);
},
set_userImage(state,data){
state.userImage = data;
window.sessionStorage.setItem('userImage',data);
},