【Vue】使用sessionStorage存储数据

最新推荐文章于 2024-07-08 19:07:26 发布

Mr_EvanChen

最新推荐文章于 2024-07-08 19:07:26 发布

阅读量7.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue sessionStorage 存储数据

本文链接：https://blog.youkuaiyun.com/Mr_EvanChen/article/details/80848352

本文介绍了在Vue项目中如何利用sessionStorage来存储用户权限信息。当用户登录时，将后台返回的权限数据存入sessionStorage，以便在不同页面中根据这些信息动态调整界面展示，如侧边栏和操作按钮的可见性。当浏览器窗口关闭时，sessionStorage中的数据会自动清除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用场景：例如，在做权限控制的时候，不同角色的用户通常展示出来的侧边栏也是不一样的，或者是界面中有的操作或许会被隐藏。这里展示，后台返回用户所拥有的权限到前端，前端把这些信息保存起来，在其他页面调用。

这里采用的是sessionStorage来实现存储数据的功能，sessionStorage数据在当前浏览器窗口关闭后自动删除。登录时，存储用户信息，代码如下：

<script>
import axios from 'axios'
export default {
  data() {
    return {
      username: "",
      password: "",
    }
  },
  methods: {
    login() {
      var vm = this
      var params = new URLSearchParams();
      params.append('username', this.username);
      params.append('password', this.password);
      axios.post("/api/v1/login/loginUser", params)
        .then(function(response) {
          if (response.data.ret == -1) {
            alert("用户名或密码错误！")
          } else {
            // 存储用户信息，其实就是这一句话
            sessionStorage.setItem('userInfo', JSON.stringify(response.data.data))
            vm.$router.push({path:'/index'});
          }
        })
        .catch(function(error) {