前端是Vue做的，那前端是怎么解析这个对象的呢

在Vue前端中，你可以通过从后端接收的 JSON 对象来访问自定义的用户信息。通常情况下，后端会将用户信息作为 JSON 对象返回给前端，前端可以使用这些信息来展示用户相关的内容。

假设后端返回的 JSON 对象如下所示：

{
  "username": "example",
  "authorities": ["ROLE_USER", "ROLE_ADMIN"],
  "accountNonExpired": true,
  "accountNonLocked": true,
  "credentialsNonExpired": true,
  "enabled": true
}

在Vue中，你可以使用 axios 或其他类似的 HTTP 客户端来从后端获取这个 JSON 对象。一旦你获取到了这个对象，你可以在 Vue 组件中访问它的属性，并根据需要进行展示或处理。

例如，你可以在 Vue 组件中使用 axios 发送 HTTP 请求来获取用户信息，并在组件的 data 属性中存储用户信息：

<template>
  <div>
    <p>用户名: {{ userInfo.username }}</p>
    <p>权限列表: {{ userInfo.authorities }}</p>
    <!-- 其他用户信息的展示 -->
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      userInfo: {}
    };
  },
  mounted() {
    this.fetchUserInfo();
  },
  methods: {
    fetchUserInfo() {
      axios.get('/api/userInfo')
        .then(response => {
          this.userInfo = response.data;
        })
        .catch(error => {
          console.error('Error fetching user info:', error);
        });
    }
  }
}
</script>

在这个例子中，axios.get('/api/userInfo') 发送一个 GET 请求来获取用户信息。一旦获取到响应数据，用户信息会被存储在 userInfo 对象中，并可以在模板中使用 {{ userInfo.username }}、{{ userInfo.authorities }} 等来展示用户相关的信息。

请注意，你需要根据你的实际情况来调整代码，确保请求后端的 URL 和数据的处理方式正确。

前端，通常会在用户登录成功后将用户信息存储在前端的某个地方，例如浏览器的本地存储（LocalStorage 或 SessionStorage）或者在内存中保存。这样，在用户登录后，前端就可以随时访问这些信息，而不需要每次请求都从后端获取一次。

一旦用户信息发生了修改，通常情况下后端会返回更新后的用户信息，并且前端需要更新存储的用户信息。这可以通过后端返回的响应来实现。前端可以在收到响应后更新存储的用户信息，并在界面上反映这些变化。

例如，在 Vue 中，你可以定义一个 Vuex 的 store 来管理用户信息。一旦用户登录成功并从后端获取到用户信息后，你可以将这些信息存储在 Vuex 的 state 中。当用户信息发生变化时，后端返回更新后的用户信息，你可以通过调用 Vuex 中的 mutation 来更新存储的用户信息。这样一来，所有组件都可以访问到最新的用户信息。

下面是一个简单的示例：

// store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    }
  },
  actions: {
    updateUser({ commit }, user) {
      commit('setUser', user);
    }
  }
});