vue生成token并保存到本地存储中

首先回顾一下token:

token认证是RESTFUL.api的一个很重要的部分，通过token认证和token设置，后端会有一个接口传给前台：

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

其实就是向用户表里去生成一个token

这里的client_id相当于用户名，client_key相当于密码，这样后台会生成一个client_token,我们需要把这个token保存到客户端中。

前端的资源一般放在另外的服务器中，这样后台需要进行进行跨域操作，在php代码中增加头文件

//就是我们常用的access-control-allow-origin
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods:GET,POST");
header("Access-Control-Allow-Headers:X-Requeted-With,content-type,if-modified-since");

这样操作就可以成功实现后台跨域。

前台项目使用的是vuex来进行状态管理，分为state、mutations、actions三大部分，我们在actions里定义一个userLogin方法，发送http用来请求后端服务器数据，返回的响应数据保存在mutations里的setUser中,因为actions里定义的userLogin方法是供用户登录时调用的，所以在userLogin.vue中也要使用userLogin方法。

总结

以上所述是小编给大家介绍的vue生成token并保存到本地存储中，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue中保存用户登录状态实例代码

    首先我们假设,这里的登录组件(register.vue)是App.vue组件的子组件,是通过路由进入登录组件的. 登录组件中用户点击登录后,后台会传过来一个用户名,我的App.vue组件中需要拿到这个用户名,并将上面的"登录注册"字样变为"用户名". 为了保证用户刷新后用户名不会消失,这里我用到了sessionStorage 代码如下: register.vue中用户点击登录触发signIn方法 signIn(){ this.formData = $(".

  • 详解vuex commit保存数据技巧

    vuex 单向数据流,推荐的commit 改变state数据,写起来非常繁琐,因为改数据可能要写很多commit函数. 依据我的理解,单向数据流主要是为了避免数据混乱,便于调试. 说白了,就是一个数据改变了,是什么促使他改变的. 数据流向永远都是一个方向,下游是没有权利改变数据的,所以需要数据发放中心同一级的方法来改变数据. 单项数据流,对于react来说,的确是必要的,但对于vue来说,是那么有必要吗? vue采用数据依赖更新,必要的数据都采用Object.defineProperty处理.给

  • Vue项目使用localStorage+Vuex保存用户登录信息

    本文实例为大家分享了Vue使用localStorage+Vuex保存用户登录信息的具体代码,供大家参考,具体内容如下 api.js import axios from 'axios' const baseURL = 'http://XXX // 全局的 axios 默认值 axios.defaults.baseURL = baseURL // 登录请求 const loginCheck = params => { return axios.post('/login', params).then(

  • Vuex利用state保存新闻数据实例

    Vuex利用state保存新闻数据实例

    回顾 以前我们在做这个新闻列表的时候,是一个写死的数据 export default{ data(){ return{ newslist:[ {newsid:"101",pubtime:"2016-10-29",title:"探索之路",desc:"是手机团队的探索之路"}, {newsid:"102",pubtime:"2016-10-28",title:"系统之战"

  • Vue中保存数据到磁盘文件的方法

    网上有诸多例子,都不是在vue下,直接复制过来,可能会出现各类的错误,折腾了若干个小时,终于搞定. 以app.vue为例 <mt-button size="small" @click="ExportData()" type="primary" style="margin:0px 10px 0px 0px">导出</mt-button> 下面在方法中定义函数 <code class="la

  • vue生成token并保存到本地存储中

    vue生成token并保存到本地存储中

    首先回顾一下token: token认证是RESTFUL.api的一个很重要的部分,通过token认证和token设置,后端会有一个接口传给前台: http://localhost/yiiserver/web/index.php/token?client_appid=aaa&client_appkey=bbb 其实就是向用户表里去生成一个token 这里的client_id相当于用户名,client_key相当于密码,这样后台会生成一个client_token,我们需要把这个token保存到客户

  • 基于jsbarcode 生成条形码并将生成的条码保存至本地+源码

    引言 JsBarcode是一个用JavaScript编写的条形码生成器.它支持多种条形码格式,可在浏览器和Node.js中使用.如果你在项目中使用了jquery也可以使用jquery,但它不是依赖项. 导读 以前生成条码都是外网网站上生成,因生产环境在内网中,上不了外网,只能在项目中生成相应规则,故将此方法整理下来. html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &

  • 将python运行结果保存至本地文件中的示例讲解

    一.建立文件,保存数据 1.使用python中内置的open函数 打开txt文件 #mode 模式 #w 只能操作写入 r 只能读取 a 向文件追加 #w+ 可读可写 r+可读可写 a+可读可追加 #wb+写入进制数据 #w模式打开文件,如果而文件中有数据,再次写入内容,会把原来的覆盖掉 file_handle=open('1.txt',mode='w') 2.向文件中写入数据 2.1 write写入 #\n 换行符 file_handle.write('hello word 你好 \n') 2

  • Android中将Bitmap对象以PNG格式保存在内部存储中的方法

    在Android中进行图像处理的任务时,有时我们希望将处理后的结果以图像文件的格式保存在内部存储空间中,本文以此为目的,介绍将Bitmap对象的数据以PNG格式保存下来的方法. 1.添加权限 由于是对SD card进行操作,必不可少的就是为你的程序添加读写权限,需要添加的内容如下: <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission>

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

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

    前面我们已经了解了可以通过localStorage在客户端(浏览器)保存数据. 我们后端有这样一个接口: http://localhost/yiiserver/web/index.php/token?client_appid=aaa&client_appkey=bbb 其实就向clients(理解为用户表即可)里面去生成一个token 这里的client_appid 就相当于用户名,client_appkey 就相当于密码. 这样后端认证之后会生成一个access-token,我们需要把这个ac

  • Vuex处理用户Token过期及优化设置封装本地存储操作模块

    目录 1. 处理用户 Token 2. 优化封装本地存储操作模块 - 封装localStrage功能 3. Vuex各属性的使用 4. 关于 Token 过期问题 5.优化设置 Token 1. 处理用户 Token Token 是用户登录成功之后服务端返回的一个身份令牌,在项目中的多个业务中需要使用到: 访问需要授权的 API 接口 校验页面的访问权限 ... 问题:Token往哪儿存? 我们只有在第一次用户登录成功之后才能拿到 Token.所以为了能在其它模块中获取到 Token 数据,我们

  • vue中如何下载文件导出保存到本地

    vue中如何下载文件导出保存到本地

    目录 vue下载文件导出保存到本地 另一种情况 vue中a标签下载本地文件-未找到,原因及解决 错误代码 原因 解决 vue下载文件导出保存到本地 先分析如何下载:先有一个链接地址,然后使用 location.href或window.open()下载到本地 看看返回数据 res.config.url 中是下载链接地址,res.data 中是返回的二进制数据 如何下载 ... <el-button icon="el-icon-download" @click="downl

  • vue获取token实现token登录的示例代码

    vue获取token实现token登录的示例代码

    使用token做登录验证的思路大致如下: 1.在第一次登录的时候前端调用后端的接口,把用户名和密码传给后端. 2.后端收到请求,验证用户名和密码,验证成功后,返回给前端一个token值. 3.前端收到后端传给的token值,将token存储在本地 loaclStorage和vuex中.(本次项目用的是vue框架,使用了vuex全局状态管理) 4.前端每次路由跳转,就判断localStorage中是否有token,如果没有就跳转登录页面,如果有就跳转到相应的页面. 5.分装一公用的请求接口方法,每

  • vue获取token如何实现token登录

    vue获取token如何实现token登录

    目录 vue获取token 实现token登录 使用token做登录验证的思路大致如下 实际步骤 vue中token的处理 传统的token处理 VUEX的存储方法 项目中的token处理方法 vue获取token 实现token登录 使用token做登录验证的思路大致如下 1.在第一次登录的时候前端调用后端的接口,把用户名和密码传给后端. 2.后端收到请求,验证用户名和密码,验证成功后,返回给前端一个token值. 3.前端收到后端传给的token值,将token存储在本地 loaclStor

  • JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)的使用

    JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)的使用

    目录 前提知识 范例 示例1:将键值对提供给本地存储 示例2: 本地存储中设置键值对 示例3: 获取空值 示例 4:将数组存储在本地存储中 示例 5:从本地存储中获取数组 示例 6:从本地存储中获取数组? 示例 7:清除本地存储 示例 8:仅从本地存储中删除 Name1 键值对 会话存储 总结 我不会告诉你任何定义和概念,上车,读完这篇博客,你就会对本地存储(Local Storage) 和 会话存储(Session Storage)有一个清晰的认识. 前提知识 请按照我以下的步骤来: 1.在任

随机推荐