在前端，有很多方法可以保持用户的登录状态。您可以通过存储Cookies、会话、令牌和其他信息来保存它。无论后台发送到前端的是哪一个，我们需要做的就是将这些信息存储在本地浏览器中。当浏览器再次发送请求时，带有' key'=' value '的cookie再次被抛出到服务器，服务器通过Cookie的字段判断用户已经登录。然后根据需求处理用户的请求，否则返回400提示用户先登录，之前我也分享过相关文章：Django战斗006:Cookie设置和跨域问题处理，Django战斗007:Cookie带Session，Django战斗008:基于令牌的认证。作为前端，也有很多方法来存储这些值。您可以将它们存储在Cookie、LocalStorage、SessionStorage或Vuex状态管理器中。当然，它们有不同的功能，比如Vue实战开发020:LocalStorage和SessionStorage的区别和用法。
怎么设置Cookie
Django可以通过HttpResponse响应对象的set_cookie，并设置相应的视图和路由。只要通过浏览器访问路由，浏览器就会自动获取set_cookie值并本地存储(它通常在浏览器运行时存在于内存中，在浏览器关闭时通常存储在硬盘中)。
00-10101，cookie存储量小；2.存储的cookie数量有限；3.增加网络负担；4.存在安全隐患
00-1010，如果存储在SessionStorage中，当用户登录时，我们需要将用户名id和令牌存储在sessionStorage中，这在Vue中同样简单，可以通过sessionStorage.setItem或sessionStorage['token']实现。然后(RES=}
if(RES . data[' code ']==200){ 0
localStorage.clear()
localStorage.setItem('info '，1)
localStorage['flag']=1
//localStorage.setItem('标志'，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({ 0
消息： '登录成功'，
键入：“成功”
})
这个。$router.push('/home ')
}else{
这个。$ message({ 0
消息： '错误用户名或密码'，
键入：“警告”
})
}
})
这样，我们可以在浏览器开发工具的应用程序中找到会话存储视图，它存储了我们刚刚获得的值。至于是否存储LocalStorage和SessionStorage，就看项目需求了。
Cookie的缺点：
LocalStorage将永久存储在浏览器中，除非被主动删除。SessionStorage仅在当前窗口关闭之前有效，其存储的数据将在窗口关闭后自动清除。
00-1010初始化store文件状态中的令牌，因为状态中的数据不支持直接修改，所以我们需要定义setToken和getToken这两个方法，然后我们就可以介绍这个了。$store.commit('setToken '，JSON.stringify(res.data.token))，从后台将令牌存储在Vuex和localStorage中。为什么要存储在localStorage中？页面刷新后，Vuex中的状态将不再存在。为了保持当前状态，需要从localStorage中提取状态，然后将值传输到Vuex。
从“vue”导入Vue
从“vuex”导入Vuex
Vue.use(Vuex)
导出默认的新Vuex。商店({ 0
状态： {
令牌：'' //初始化令牌
},
突变： {
//存储令牌方法
//将令牌设置为等于从外部传入的值。
setToken(状态，令牌){ 0
state.token=令牌
本地存储。令牌=令牌//将令牌同步存储到本地存储
},
},
getters : {
//获取令牌方法
//判断是否有令牌，如果没有重分配，则返回状态的令牌。
getToken(状态){ 0
if(！state . token){ 0
state . token=local storage . getitem(' token ')
}
返回状态。令牌
}
},
操作： {
}
})
LocalStorage与SessionStorage存储Token
Vuex是状态管理器，而不是存储工具。为什么要在Vuex存储代币？Vuex中封装的localStorage操作可以直接使用localStorage操作数据，但不能监控数据变化。而Vuex是全局存储，可以同时监控数据状态的变化。当Vuex的值发生变化时，它可以相应地监控数据的变化。
欢迎来到我的微信官方账号：编程笔记，文章会在微信官方账号更新。