vue中本地存储返回的token和用户id，并发送请求获取个人信息（携带token）

最新推荐文章于 2022-11-24 15:28:39 发布
最新推荐文章于 2022-11-24 15:28:39 发布
阅读量2.8k 收藏 9
点赞数 1
分类专栏： vue基础知识 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47686269/article/details/109185519
版权
本文介绍在Vue应用中如何处理本地存储的token和用户ID，以及如何在页面加载时利用token发送请求获取个人详细信息。
摘要由CSDN通过智能技术生成

vue中本地存储返回的token和用户id，并发送请求获取个人信息（携带token）
前情：token概要
在这里插入图片描述
如何查看localStorage在这里插入图片描述
根据返回的statuscode跳转
规则：先存token再跳转
在这里插入图片描述
在个人中心页，一跳转到这个页面就要在created中发送请求，存储渲染在这里插入图片描述
在这里插入图片描述

Dking222
关注
专栏目录
vue实现登录_获取token_拉取用户信息
weixin_48429986的博客
06-09 4186
vue实现登录_获取token_拉取用户信息 一、接上之前封装和跨域的文章来简单进行登录页面功能 ​ 这里接上之前的； 第一步 //封装好的接口文件、获取的是一个模拟的接口 import { login } from './API_TYPE' //封装的axios的post方法 import { POST } from './request' 在这里默认抛出一个匿名函数并准备接收*用户名*和*密码* export default function (username, password) { //返回这个
前端Vue怎么获取登录的用户名或用户id
最新发布
zyhang666的博客
05-10 2470
1.在登录成功后getUserid是我写的后端接口函数，SetUserId将用户id保存到 localStorage 中。在需要获取登录用户名的组件中，通过读取 localStorage 来获取用户id。创建 Vuex store，并在其中定义一个用于存储用户名的状态。在登录成功后，将用户名保存到 Vuex store 中。在需要获取登录用户名的组件中，使用计算属性来获取用户名。
vue 导出文件,携带请求头token操作
10-14
主要介绍了vue 导出文件,携带请求头token操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+axios登录时获取token和userId
坤音女孩的博客
11-05 6421
1.登录成功后，存储后台返回的token值和userId PS：把username和password，post请求发送到后台，若username和password正确，后台返回token和userId。若本地存储有token，localStorage.getItem(‘token’)，则路由跳转到index页面，否则跳转到login；若username和password有其一错误，则登录不成功 ...
vue 记住用户名和密码
MAYA_G的博客
09-15 971
vue 使用cookie完成记住用户名和密码
vue生成token并保存到本地存储中
12-12
token认证是RESTFUL.api的一个很重要的部分，通过token认证和token设置，后端会有一个接口传给前台： http://localhost/yiiserver/web/index.php/token?client_appid=aaa&client_appkey=bbb 其实就是向用户表里去...
vue的token刷新处理的方法
01-21
服务器将用户信息（如用户id）使用特殊算法加密后作为验证的标志发送给用户（即token），当用户下次发起请求时，会将这个token捎带过来，服务器再将这个token通过解密后进行验证，通过的话，则向客户端返回请求的...
Vue中axios拦截器如何单独配置token
10-15
Session则是存储在服务器端的一种机制，客户端的每个请求都会带着一个唯一的Session ID，服务器端通过Session ID查找对应的Session来记录用户的会话信息。Token是一种服务端生成的唯一字符串，通常在用户登录验证...
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
11-19
在vue中，可以用**Storage（sessionStorage，localStorage）**来存储token，也可以用vuex来存储（但要考虑页面刷新数据消失问题，可以在vuex用Storage）， 下面介绍用localStorage来存储： 在登录请求成功后，会返回一个token值，用loaclStorage保存 localStorage.setItem(‘token’,res.data.token) 在main.js中设置全局请求头和响应回来的判断 //设置axios请求头加入token Axios.interceptors.request.use(config => { i
详解vue项目中使用token的身份验证的简单实践
10-17
总的来说，Vue项目中使用Token进行身份验证涉及到前端路由控制、请求和响应拦截器的配置，以及Token的本地存储。通过这样的流程，我们可以确保只有经过验证的用户才能访问受保护的资源，从而提高应用的安全性。
Vue-给后端传登陆的用户id
眾K的博客
12-12 4005
Vue-给后端传登陆的用户id1.先通过session获取id2.获取信息前传id给后端 1.先通过session获取id computed: { userinfo() { return JSON.parse(sessionStorage.getItem("userinfo")); } }, 2.获取信息前传id给后端 let thiscom = this...
Vue登录表单提交以及获取后端传的token存储到store中
weixin_51472505的博客
03-16 2741
1：登录页面编写 <template> <div> <el-container> <el-header> <router-link to="/blogs"> <div style="height: 60%;font-size: 30px"> Login </div> </router-link>
vue fromData提交表单(文件)的同时 axios通过将token封装一起发送，Springboot后端拦截器通过request.getParameter获取，Redis验证token
qq_53066920的博客
11-24 591
【代码】vue fromData提交表单(文件)的同时 axios通过将token封装一起发送，Springboot后端拦截器通过request.getParameter获取，Redis验证token。
vue实现导出excel时携带token(封装)
weixin_48398799的博客
12-24 746
新建一个文件export.js封装方法 export.js中： import axios from 'axios' export function expotOut(searchList, pathName, xlsName, url) { // 获取时间，这一步是在下载时文件名带下载日期，例如：用户信息2020-04-27.xls,如无需要可以去掉 let d = new Date() let month = (d.getMonth() + 1) let day = d.
Vue登录时将用户登录的信息保存并全局调用
weixin_43294092的博客
05-28 5539
      受以前学习的影响 ，认为在任何地方都可以调用的变量，一定是全局变量。于是，就想把用户登录的账号和密码保存起来，当做全局变量。      在网上看了许多相关资料，全局变量是可以，可是他们定义的都是死...
Vue中登录成功保存token，并每次请求携带并验证token
深圳最菜前端
11-19 2950
在登录请求成功后，会返回一个token值，用loaclStorage保存 localStorage.setItem('token',res.data.token) 一般会在main.js或者是单独的request.js中设置全局请求头和响应回来的判断 //设置axios请求头加入token Axios.interceptors.request.use(config => { if (config.push === '/') { } else { if (localSt
vue脚手架接口请求如何携带token
05-24
在Vue脚手架中，可以通过在请求头中添加Authorization字段来携带token。具体步骤如下： 1. 在请求头中添加Authorization字段。 2. Authorization字段的值为Bearer + 空格 + token。 3. 在发送请求时，需要将token作为参数传递给API函数。 示例代码如下： ```javascript // 引入axios库 import axios from 'axios' // 在请求头中添加Authorization字段 axios.defaults.headers.common['Authorization'] = 'Bearer ' + token; // 发送请求 axios.get('/api/user', { params: { id: 123 } }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ``` 其中，token为用户登录后获取到的令牌。在上述示例中，我们使用了axios库来发送请求，同时在请求头中添加了Authorization字段。当然，你也可以使用其他的HTTP库来发送请求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值