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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(vue,node)