关于vuex使用“token”字段存储token变undefined的坑

已于 2022-03-01 12:08:55 修改
阅读量2.7k 收藏 3
点赞数
文章标签： 前端 javascript vue.js
于 2022-03-01 12:04:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/temperlili/article/details/123202526
版权

最近做前后端分离的项目，前端登录时使用vuex存储后端发过来的token信息，当时的设置是在state中使用“token”字段存。但是后边发现，每次登录后只有第一次能获取到state中的token，后边再次获取时都变成的undefined！
后边将“token”字段重新命名为“user_token”就没事了…我也不清楚这是什么原因，好像是不给使用“token”字段，使用了之后，获取时会变成undefined…

下面是相关测试：
在这里插入图片描述
在这里插入图片描述
在登录后，第一次获取前是正常显示的：
在这里插入图片描述
第二次获取时就变成undefined了
在这里插入图片描述
本人太菜了，具体为什么也搞不清楚，只能记录一下这个坑
在这里插入图片描述

HandlerAdpater
关注
使用vuex存储token
lonsole的博客
09-17 579
//1、在真实开发中，一般不会在state的最外层处理信息 //一般都会创建module //2、在store下新建module--> loginModule.js /* loginModule.js */ export default { namespaced:true,//作用域问题 state:{ token:'', user:''//用户信息 }, mutations:{ // 设置token setToken(state,value) {
Cookie & Session & Token
gc_charl的博客
05-29 838
Cookie & Session & Token Cookie: 理论上，一个用户的所有请求操作都应该属于同一个会话，而另一个用户的所有请求操作则应该属于另一个会话，二者不能混淆。 而Web应用程序是使用HTTP协议传输数据的。HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。(例：用户A购买了一件商品放入购物车内，当再次购买商品时服务器已经无法判断该购买行为是属于用户A的会话还是用户B的会话了)
vuex中使用token时$store 一直undefined的问题
m0_59704787的博客
10-30 9299
报错:Cannot read properties of undefined(reading '$store') at eval 错误代码展示： 分析原因： 首先在main.js中对$store进行打印，观察是否真的将store注册到Vue实例中 打印结果: 打印出来后，控制台能对$store进行打印，说明store是存在于vue中的，所以排除vuex安装错误和store没有注册到实例例中的错误。 再观察方法中如何调用store——直接使用this.store，那...
关于登录后第一次调用接口token为undefined的情况,以及带名,匿名,箭头函数区别
qq_45919348的博客
01-14 3656
1、关于登录后第一次调用接口token为undefined的情况 在我们利用axios.create const getInstance = () => { return axios.create({ headers: { Authorization: `Bearer ${storage.get("token")}`, Server: `${Date.parse(new Date().toString())}`, //添加时间戳 }, baseURL
Vuex
qq_45177371的博客
09-05 270
Vuex 首先来看看今天要用到的库 1. vue中各个组件之间传值 首先来看看变量传值的演变（图解） 1.父子组件 父组件–>子组件，通过子组件的自定义属性：props 子组件–>父组件，通过自定义事件：this.emit(′事件名′,参数1,参数2,...);2.非父子组件或父子组件通过数据总数Bus，this.emit('事件名',参数1,参...
vue2请求数据显示undefined
m0_46426161的博客
07-07 654
vue2请求数据二级数据显示undefined
VUEX数据持久化-----token数据保存问题
xiaofiy的博客
06-07 2573
Vuex 容器中的数据只是为了方便在其他任何地方能方便的获取登录状态数据，但是页面刷新还是会丢失数据状态，所以我们还要把数据进行持久化中以防止页面刷新丢失状态的问题。 基本的思路是： 用户登陆成功之后，保存token到本地存储localstorage 在vuex容器初始化时，使用本地存储中的值 根目录下各文件作用 一、封装存储模块 // 封装模块 使用localStorage实现持久化 只是进行保存 // 从localStorage中取出一项数据 名字叫name export const getIte
深入理解：session与token的使用与特性分析
3. 在后续请求中，客户端将token放在请求头（通常是`Authorization`字段）发送给服务器。 4. 服务器验证token的有效性，若通过则处理请求。 总结来说，session适合于简单、单域的应用，而token在分布式系统、移动...
vue中登陆后重定向token变成undefined
05-24
一般来说，我们可以将 token 存储到浏览器的 sessionStorage 或 localStorage 中，以便在后续的请求中使用。 在 Vue 中，可以在登录成功后，将获取到的 token 存储到 sessionStorage 或 localStorage 中。比如使用 ...
请求未携带的token是undefined
07-14
关于您提到的请求未携带的token是undefined的问题，这可能是因为您在请求中未正确设置或传递token。在进行某些API请求时，您可能需要提供有效的身份验证令牌（token）以进行授权和身份验证。 如果您使用的是某个API...
Postman接口之token获取及数据关联和断言
cdhuang123的博客
12-13 795
1、环境变量的创建及使用: 2、变量名设置，点击上一步的环境变量，弹出下面的页面： 3、设置完后记得选择对应的环境变量 4、查看接口运行后参数是否存入到环境变量中： 好了基础设置如上，下面是代码： 5、切换至test，在需要获取的接口中，写入如下js代码： // 把responseBody转为json字符串 var data = JSON.parse(responseBody); /...
vue3中把token存放在vuex中总是失败了
weixin_48950142的博客
08-29 176
然后我就发现一直报错！在store/index新建。
日踩一坑：关于登录跳转读取store中的token拿到undefined的问题
graciedu的博客
06-28 1887
token赋值，从store中取token
vue问题01：路由鉴权跳转页面，vuex+sessionStorage中的token不一致，刷新页面数据丢失
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
08-17 1278
vue问题01：路由鉴权跳转页面，vuex+sessionStorage中的token不一致，刷新页面数据丢失
vue中函数参数传递为undefined
最新发布
qq_36022463的博客
11-07 834
会在实际dom元素上绑定一个新的函数，，这个新的函数不再与当前Vue组件实例的上下文相关，，因此在这个新函数的内部，无法直接访问当前组件实例的数据，方法，或者计算属性。vue为事件处理程序创建一个新的函数，，并且这个函数的上下文不再和当前组件的上下文相关，，这个item会变成undefined，，，需要使用箭头函数，，将item传进去。, 箭头函数继承了外部作用域上下文，，可以访问外部的变量。在Vue中 ，时间处理函数 比如。
vuex之刷新页面时token丢失问题
weixin_42965737的博客
03-14 5220
前端项目，使用vuex作为状态存储，但是遇到一个问题，就是在刷新页面时出现了丢失token的问题，下面给出完美的解答： 1.可以使用缓存将vuex中的state缓存起来，可以使用localStorage和sessionStorage。cookie不适合存储。 localStorage是长期存储，sessionStorage是会话期间存储，这里使用sessionStorage. 在这里插入图片描述 2.上代码 App.vue中添加 mounted()和methods，在刷新的时候进行持久化。 <te
使用vue配置代理时前端请求的时候报服务器端错误504；vue控制台报错Error occurred while trying to proxy request
热门推荐
Derick的博客
08-07 1万+
报错详情[HPM] Error occurred while trying to proxy request /login/ from 127.0.0.1:8080 to http://127.0.0.1:8081 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors) 在网上找了资料发现各种...
vue-cli 解决跨域 proxyTable设置无效 报错504--- 解决方法
俺也不敢问
12-17 3507
vue-cli 解决跨域 proxyTable设置无效 报错504— 解决方法 这个问题搞得我快崩溃了，发现错误之后让我想起了一句话:“细节决定成败，态度决定一切”。 下面说一下这点小细节，希望对同样错误的人有所帮助。 下面是proxyTable的设置 （这里你能看出来有什么问题吗？） 当我开始请求的时候浏览器报错504： 这问题让我很懵逼，想是不是哪里少写了，然后百度proxyTable的...
Vue中出现最多的“undefined”错误，检查原因以及解决办法（亲测有效）
m0_70545163的博客
09-04 1万+
摘要：本文主要来讲讲vue中出现最多的"undefined"错误。
使用vue和vuex实现token存储
05-03
在Vue和Vuex中实现Token存储，可以将Token保存在Vuex的状态管理器中，这样在整个应用程序中都可以访问到Token。下面是一个简单的示例： 1. 首先，在Vuex中创建一个module，用于存储Token： ```javascript // store/modules/auth.js const state = { token: null } const mutations = { setToken(state, token) { state.token = token } } export default { state, mutations } ``` 2. 在Vue组件中使用Vuex的mapState和mapMutations方法，将Token存储到Vuex中： ```javascript // Login.vue <template> <div> <input type="text" v-model="username"> <input type="password" v-model="password"> <button @click="login">Login</button> </div> </template> <script> import { mapState, mapMutations } from 'vuex' export default { data() { return { username: '', password: '' } }, computed: { ...mapState({ token: state => state.auth.token }) }, methods: { ...mapMutations({ setToken: 'auth/setToken' }), login() { // 发送登录请求，获取Token const token = 'xxxxx' this.setToken(token) } } } </script> ``` 3. 在需要验证Token的请求中，从Vuex中获取Token： ```javascript // api.js import axios from 'axios' import store from '@/store' const api = axios.create({ baseURL: 'https://api.example.com', headers: { 'Content-Type': 'application/json' } }) api.interceptors.request.use(config => { const token = store.state.auth.token if (token) { config.headers.Authorization = `Bearer ${token}` } return config }, error => { return Promise.reject(error) }) export default api ``` 以上是一个简单的实现方法，当然，实际应用中还需要考虑Token的过期时间和刷新等问题。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值