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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
16个最流行的JavaScript框架[推荐]
May 29 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
js点击选择文本的方法
Feb 09 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
JS实现简单打字测试
Jun 24 Javascript
Ant Design的Table组件去除
Oct 24 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
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
在视频前插入广告
2006/11/20 Javascript
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
js 目录列举函数
2008/11/06 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
python修改list中所有元素类型的三种方法
2018/04/09 Python
python实现图片插入文字
2019/11/26 Python
Python实现自动访问网页的例子
2020/02/21 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
Python3读写ini配置文件的示例
2020/11/06 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
致标枪运动员加油稿
2014/02/15 职场文书
园艺师求职信
2014/03/10 职场文书
个人求职信范文
2014/05/24 职场文书
2014教师研修学习体会
2014/07/08 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
公司承诺函范文
2015/01/21 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
《为人民服务》教学反思
2016/02/20 职场文书