vue生成token保存在客户端localStorage中的方法(2)

日期：2020-05-18 栏目：程序人生 浏览：次

actions部分：我们写了一个userLogin()方法，来发送http请求后端服务器，请求成功返回的数据调用在mutations部分定义的setUser()方法保存到客户端。 

注意：actions里的userLogin()方法，是供在用户登录页调用的，也就是userslogin.vue里。 

所以来到userlogin.vue，修改如下代码：

我们来测试一下，有没有成功保存到客户端的localStorage 中： 

  methods:{
   login(){

    // 这个验证是element-ui框架提供的方法
    this.$refs["users"].validate(function (flag) {
     if(flag){
      /*localStorage.setItem("currentUser",this.UserModel.user_name);
      alert("用户登录成功");*/

      this.$store.dispatch("userLogin",{"user_name":this.UserModel.user_name,"user_pass":this.UserModel.user_pass})
     }else{
      alert("用户名密码必填");
     }
    }.bind(this));
   }
  }

这里写图片描述

2、如果我们的会员后台 

http://localhost:8080/member 

也需要获取用户的登录信息，比如用户名。来显示到导航栏上。

首先是应该在会员后台模块的入口文件member-index.js中：

//引入Module
import ResModule from './../Store/modules/ResModules';
import UsersMoule from "./../Store/modules/UsersModule";
const vuex_config = new Vuex.Store({
 modules: {
  res:ResModule,
  users:UsersMoule
 }
});

然后我们就可以在，比如导航栏组件navbar.vue中：

<a href="##" rel="external nofollow" >{{this.$store.state.users.currentUser.UserName}}</a>

通过这样的方式，访问users里的属性。 

这里写图片描述

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。