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


Posted in Javascript onOctober 25, 2017

前面我们已经了解了可以通过localStorage在客户端(浏览器)保存数据。

我们后端有这样一个接口:

http://localhost/yiiserver/web/index.php/token?client_appid=aaa&client_appkey=bbb

其实就向clients(理解为用户表即可)里面去生成一个token 

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

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

这里的client_appid 就相当于用户名,client_appkey 就相当于密码。 

这样后端认证之后会生成一个access-token,我们需要把这个access-token 保存在客户端。

注意:我们前端一般部署在另外的服务器上,会跨域,后端要处理跨域的问题,在PHP中可以写上如下代码:

//指定允许其他域名访问
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET,POST");
header('Access-Control-Allow-Headers: X-Requested-With,content-type,if-modified-since');

前端的套路

注意,我们项目既然早已用上了VueX,那么我肯定就要在Store(vuex里的概念)里面来创建一个module。 

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

我们新建了一个UsersModule.js 来处理用户登录的业务,注意不要忘记在入口文件users-index.js 中引入。如果我们的『会员后台』也需要用户相关数据,也要引入。 

users-index.js 里修改:

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

1、UsersModule.js

import Vue from "vue";

export default {
 state:{
  currentUser:{
   get UserName(){
    return localStorage.getItem("currentUser_name");
   },
   get UserToken(){
    return localStorage.getItem("currentUser_token");
   }
  }
 },
 mutations:{
  setUser(state,{user_name,user_token}){
   // 在这里把用户名和token保存起来
   localStorage.setItem("currentUser_name",user_name);
   localStorage.setItem("currentUser_token",user_token);
  }
 },
 actions:{
  userLogin(context,{user_name,user_pass}){
   // 发送get请求做权限认证(真实开发建议用post的方式)
   let url = "http://localhost/yiiserver/web/index.php/token?client_appid="+user_name+"&client_appkey="+user_pass;
   console.log(url);

   Vue.http.get(url)
    .then((res)=>{
     if (res!=null && res.body!=undefined && "access-token" in res.body){
      var token = res.body["access-token"];
      if (token != ""){
       // 后端API验证通过
       // 调用上面mutations里定义的方法
       context.commit("setUser",{"user_name":user_name,"user_token":token});
      }
     }else{
      alert("用户名密码错误");
     }
    },(res)=>{
     alert("请求失败进入这里")
    });
  }
 }
}

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));
   }
  }

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

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里的属性。 

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
对javascript继承的理解
Oct 11 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 #Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 #Javascript
vue语法之拼接字符串的示例代码
Oct 25 #Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 #Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 #Javascript
浅谈Node.js之异步流控制
Oct 25 #Javascript
AngularJS 实现购物车全选反选功能
Oct 24 #Javascript
You might like
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
PHP Include文件实例讲解
2019/02/15 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
DNA基因检测和分析:23andMe
2019/05/01 全球购物
学生实习介绍信
2014/01/15 职场文书
干部培训自我鉴定
2014/01/22 职场文书
大学军训感言600字
2014/02/25 职场文书
社区志愿者活动总结
2014/06/26 职场文书
实习单位证明范例
2014/11/17 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
消费者投诉书范文
2015/07/02 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL