关于前端读取后端接口数据问题

请问，当我在后端用session为登录注册接口做了数据持久化，前端vue中如何实现用户登录后读取到用户信息并将信息渲染到vue模板中，可能还需要用到组件之间的通信。。感谢！

用ajax请求，获取到用户信息，可以存在本地或者vuex，在相关页面直接获取渲染就可以了

存数据：window.sessionStorage.setItem("userId", res.data.user.id);
window.sessionStorage.setItem("userName", res.data.user.username);
取数据：userId = window.sessionStorage.getItem('userId')

要从后端取数据就要通过axios向后端发送get或post请求获取数据来修改data中和组件绑定的值

思路：1、登录或者注册以后使用sessionStorage将用户信息(包含token信息)存储
2、在其他页面使用时先通过后端接口获取到用户信息
3、获取sessionStorage的用户信息和 后端返回的用户信息做比较是否为同一个用户
4、如果是同一个用户则可以进行下一步操作否则提示用户没有权限或者其他提示信息

可以利用vuex存储用户信息，sessionStorage也可以，下面用vuex方式

 this.$store.commit("userInfo", data);   // 登录成功后存储用户信息

vuex

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    userInfo: {}, 
  },
  mutations: {
    userInfo(state, userInfo) {
      state.userInfo = userInfo;
    },
  },
});

可以在任何组件获取vuex中的userinfo信息

this.$store.state.userInfo

组件间通信
https://blog.csdn.net/weixin_47074432/article/details/108665492

建议使用cookie和VueX同步储存
VueX数据是响应式的，但是缺陷是页面刷新会消失
绝大部分网站登录返回的用户信息和token都会存在Cookie

获取到用户信息后，存储在localstorage或者sessionstorage中，存.set() 取.get()

两者的区别是localstorage是永久保存，你不删就一直在，sessionstorage是浏览器不关就一直在，一关浏览器就删了

存本地,然后在渲染