node+ express+ vue+ vuex实现:登录-状态管理-token生成-token验证

1 篇文章 0 订阅

在学习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);
      },

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值