vue中如何获取session对象中的属性值

Vue.js 中如何获取 Session 对象中的属性值

当我们开发前端 Web 应用的时候，常常需要与后端交互获取数据。在这些数据中，可能需要从 Session 对象中获取我们需要的字段值。那么在 Vue.js 中，我们该如何获取 Session 对象中的属性值呢？本文将会提供几种方法来实现这个目标。

通过 HTTP Cookie 获取 SessionID

Session 对象是与特定用户会话相关的服务器端存储对象，它在后端使用 Cookie 或者 URL 重写的方式来维护客户端与服务器端的会话。那么我们可以通过获取客户端的 SessionID 来获取对应的 Session 对象。

通常情况下，在客户端发送请求的时候，后端服务会将这个 SessionID 放入 HTTP 响应头部的 Set-Cookie 字段中来回传给客户端，客户端的浏览器会将这个 Cookie 值存储下来，一般情况下是通过 Document.cookie 属性来获取 Cookie　值，然后将这个值提交给服务器端的 Session 管理器，从而获取服务器端的 Session 对象。如果 SessionID 是通过 Cookies 来维护的，那么我们只需要通过 Document.cookie 属性来获取相关的 SessionID，然后将它传给服务端，即可获取 Session 中的属性值。具体的代码如下所示：

let cookie = document.cookie.split('; ').find(row => row.startsWith('SESSIONID='));
let sessionId = cookie ? cookie.split('=')[1] : null;

SessionID 是通过 Cookie 维护的情况下，在 Vue 应用中，我们一般可以封装一个 Axios 实例，然后在每次发送请求的时候将这个 SessionID 设置到请求头中，从而达到自动携带 Cookie 的效果。代码如下所示：

import axios from "axios"

const instance = axios.create({
  baseURL: "http://localhost:8080",
  // 设置跨域请求时后端需要的凭证头部信息
  withCredentials: true
});

// 在每次请求前加上 SessionID
instance.interceptors.request.use(config => {
  let cookie = document.cookie.split('; ').find(row => row.startsWith('SESSIONID='));
  let sessionId = cookie ? cookie.split('=')[1] : null;
  if (sessionId) {
    config.headers.Authorization = sessionId;
  }
  return config;
});

在 Vuex 中获取 Session 属性值

Vue.js 应用中使用 Vuex 来统一管理应用的状态，那么获取 Session 属性值也可以通过在 Vuex 中进行统一管理。我们可以在请求成功后将 Session 中的属性保存到 Vuex 的 state 中，然后通过 getter 对外暴露出去。在调用属性值的时候，直接通过 this.\$store.getters.xxxx 来获取属性值。代码如下所示：

// store.js
import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    user: null
  },
  getters: {
    username: state => {
      return state.user ? state.user.username : null;
    },
    userId: state => {
      return state.user ? state.user.userId : null;
    }
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    }
  }
})

export default store

// Vue 组件中创建请求
import axios from "axios"
import store from "./store"

axios.post('/user').then(response => {
  let user = response.data;
  store.commit('setUser', user);
})

通过以上方式，我们就可以在 Vue 中方便地获取 Session 对象中的属性值了。

总结

本文介绍了在 Vue.js 应用中获取 Session 对象中的属性值的两种方式：通过 HTTP Cookie 获取 SessionID 和在 Vuex 中统一管理。如果你有更好的实现方式欢迎在评论区指出。