vue如何存储token,vue根据token获取用户信息

　　本文主要介绍Vue保持用户登录状态(各种令牌存储方式)，通过实例代码详细介绍，有一定参考价值，感兴趣的朋友可以参考一下。

　　如何设置cookie cookie的缺点：LocalStorage和SessionStorage token local storage和session storage的主要区别：为什么要用Vuex在前端存储令牌？有许多方法可以保持用户登录。你可以通过存储Cookies，Session，Token等信息来保存。无论后台向前端发送哪些信息，我们要做的就是将这些信息存储在本地浏览器中。当浏览器再次发送请求时，它将再次向服务器抛出带有 key= value 的Cookie。服务器通过cookie字段判断用户已经登录，然后根据需求处理用户请求。否则返回400提示用户先登录。之前我也分享过相关文章：Django: Cookie设置和跨域问题处理，Django:与Session一起使用的Cookie，Django:基于令牌的认证。作为前端，也有很多方法来存储这些值。您可以将它们存储在Cookie、LocalStorage、SessionStorage或Vuex状态管理器中。当然，它们的功能也是不同的，比如Vue的区别和用法：LocalStorage和SessionStorage。

怎么设置Cookie

　　Django可以通过HttpResponse响应对象的set_cookie，设置相应的视图和路由。只要通过浏览器访问路由，浏览器就会自动获取set_cookie值并存储在本地(浏览器运行时一般存在内存中，浏览器关闭时一般存储在硬盘中)。

Cookie的缺点：

　　1、cookie存储量小；2、存储的cookie数量有限；3.增加网络负担；4.存在安全隐患

LocalStorage与SessionStorage存储Token

　　比如保存在SessionStorage中，当用户登录时，我们需要将用户名id和令牌保存到session storage中。在Vue中实现同样简单，既可以通过sessionStorage.setItem实现，也可以通过sessionStorage[token]实现。然后(res={

　　if(res.data[code]==200){

　　localStorage.clear()

　　localStorage.setItem(info ，1)

　　localStorage[flag]=1

　　//localStorage.setItem(flag ，1)

　　sessionStorage.clear()

　　//session storage[ userid ]=JSON . stringify(RES . data . userinfo . id)

　　sessionStorage.setItem(userid ，JSON . stringify(RES . data . userinfo . id))

　　session storage[ token ]=JSON . stringify(RES . data . token)

　　这个。$message({

　　消息：“登录成功”，

　　类型：“成功”

　　})

　　这个。$router.push(/home )

　　}否则{

　　这个。$message({

　　消息：“错误的用户名或密码”，

　　类型：“警告”

　　})

　　}

　　})

　　这样我们就可以在浏览器的开发者工具的应用中找到Session Storge，我们刚刚得到的值就存储在里面了。至于是否存储LocalStorage和SessionStorage，要看项目需求。

LocalStorage与SessionStorage的主要区别：

　　除非被主动删除，否则LocalStorage将永久存储在浏览器中。

　　SessionStorage只在当前窗口关闭前有效，其存储的数据会在窗口关闭后自动清除。

Vuex存储Token

　　在存储文件的状态下初始化令牌。因为状态中的数据不支持直接修改，所以我们需要定义方法setToken(设置令牌)和getToken(获取令牌)。然后我们可以介绍这个。登录界面的$store.commit(setToken )，JSON.stringify(res.data.token))，并从后台将令牌存储在Vuex和localStorage中。为什么要存储在localStorage中？页面刷新后，Vuex中的状态不再存在。为了保持当前状态，需要从localStorage中提取状态，然后将值传输到Vuex。

　　从“vue”导入Vue

　　从“vuex”导入Vuex

　　Vue.use(Vuex)

　　导出默认的新Vuex。商店({

　　状态：{

　　令牌： //初始化令牌

　　突变：{

　　//存储令牌方法

　　//将token设置为等于外部传入的值。

　　setToken(状态，令牌){

　　state.token=令牌

　　LocalStorage.token=token //将令牌同步存储到LocalStorage

　　getters : {

　　//获取令牌方法

　　//判断是否有令牌，如果没有重新赋值，则返回状态令牌

　　getToken(州){

　　如果(！state.token) {

　　state . token=local storage . getitem( token )

　　}

　　返回状态.令牌

　　}

　　动作：{

　　}

　　})

为什么要使用Vuex

　　Vuex是状态管理器，不是存储工具。为什么令牌存储在Vuex中？Vuex中封装的localStorage操作可以直接使用localStorage操作数据，但不能监控数据变化。Vuex是全局存储，可以监控数据状态的变化。当Vuex的值发生变化时，它可以相应地监测数据的变化。

　　关于通过Vue(各种令牌存储方法)保持用户登录的这篇文章到此为止。关于通过Vue保持用户登录的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。