vue用session存取数据

1.存放数据

//将js对象转换为json对象存放到session,data为一个js对象
sessionStorage.setItem("user", JSON.stringify(data));

2.取出数据

 let user = sessionStorage.getItem("user");
 if (user != null) {
      // 将JSON格式的对象解析为js对象,currentUser为一个js对象
      this.currentUser= JSON.parse(user);
  }

3.删除数据

 sessionStorage.removeItem("user");

 

!!注意存放数据的名字要和取数据以及删除数据的名字一致 

  • 6
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue3 中登录成功后获取 Session 的方式可以通过以下步骤实现: 1. 在登录页面向后端发送登录请求,将用户名和密码作为请求参数传递给后端。 2. 后端验证用户名和密码,如果验证通过,则生成一个 Session ID,并将 Session ID 保存在 Redis、MySQL 或者其他数据存储中,并将 Session ID 返回给前端。 3. 前端在接收到后端返回的 Session ID 后,可以将其存储在本地的 Local Storage 或者 Session Storage 中。 4. 在之后的请求中,前端需要在请求头中携带 Session ID,后端根据 Session ID 来识别用户的身份信息。 下面是一个简单的示例代码: ```vue <template> <div> <input v-model="username"> <input v-model="password"> <button @click="login">登录</button> </div> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { login() { // 向后端发送登录请求 this.$axios.post('/login', { username: this.username, password: this.password }).then(response => { // 登录成功,将 Session ID 存储到本地 localStorage.setItem('sessionId', response.data.sessionId) }).catch(error => { // 登录失败,处理错误信息 }) } } } </script> ``` 在之后的请求中,可以在请求头中加入 Session ID,例如: ```javascript import axios from 'axios' // 设置请求拦截器,在请求头中加入 Session ID axios.interceptors.request.use(config => { const sessionId = localStorage.getItem('sessionId') if (sessionId) { config.headers['sessionId'] = sessionId } return config }) ``` 在后端中,需要根据请求头中的 Session ID 来识别用户的身份信息,例如: ```java @RestController public class UserController { @Autowired private UserService userService; @GetMapping("/user") public User getUser(@RequestHeader("sessionId") String sessionId) { // 根据 Session ID 获取用户信息 User user = userService.getUserBySessionId(sessionId); return user; } } ``` 需要注意的是,为了保证 Session 的安全性,需要在后端进行 Session 的有效期、Session ID 的生成和加密等方面进行处理。同时,需要注意防止 CSRF、XSS 等安全问题的发生。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

工地精神

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值