登录前端笔记（二）：vuex管理用户数据；跨域；axios封装；环境；请求响应拦截；权限；用户资料Vuex共享

登录前端笔记（二）：Vuex管理用户数据、跨域、Axios封装及相关技术

在现代的前端开发中，特别是使用Vue.js框架时，我们常常需要处理用户的登录状态、跨域请求以及后台接口的调用。本文将围绕Vuex管理用户数据、跨域问题的解决方案、Axios的封装、环境变量的配置、请求响应拦截以及权限管理等几个方面进行探讨，并提供相关的代码示例。

一、Vuex管理用户数据

Vuex是Vue.js的状态管理库，可以帮助我们集中管理应用的状态。首先，我们需要安装Vuex：

npm install vuex --save

然后，在项目中创建一个store.js文件来集中管理状态。以下是一个简单的用户状态管理的示例：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null,
    isAuthenticated: false,
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user;
      state.isAuthenticated = !!user;
    },
    LOGOUT(state) {
      state.user = null;
      state.isAuthenticated = false;
    },
  },
  actions: {
    login({ commit }, userData) {
      // 假设从接口获取用户信息
      commit('SET_USER', userData);
    },
    logout({ commit }) {
      commit('LOGOUT');
    },
  },
});

在组件中使用这些状态：

<template>
  <div>
    <p v-if="isAuthenticated">欢迎, {{ user.name }}</p>
    <button v-if="!isAuthenticated" @click="login">登录</button>
    <button v-if="isAuthenticated" @click="logout">退出</button>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['user', 'isAuthenticated']),
  },
  methods: {
    login() {
      const mockUser = { name: '张三' }; // 模拟的用户数据
      this.$store.dispatch('login', mockUser);
    },
    logout() {
      this.$store.dispatch('logout');
    },
  },
};
</script>

二、跨域问题的解决方案

在开发过程中，跨域请求是一个常见问题。我们可以使用CORS（跨源资源共享）来解决。通常在后端添加相关的CORS头部信息即可。此外，如果使用vue-cli进行开发，可以在vue.config.js中配置代理：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端服务地址
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
  },
};

三、Axios的封装

我们通常会封装Axios以便在项目中重复使用。我们可以创建一个http.js文件，设置基本配置及拦截器。

// http.js
import axios from 'axios';

const http = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL, // 基础URL可以从环境变量中获取
  timeout: 10000,
});

// 请求拦截器
http.interceptors.request.use(config => {
  const token = localStorage.getItem('token'); // 假设使用token管理权限
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
http.interceptors.response.use(response => {
  return response.data; // 只返回需要的数据
}, error => {
  return Promise.reject(error);
});

export default http;

四、环境变量的配置

在Vue项目中，可以通过.env文件来配置不同环境下的变量。例如：

// .env
VUE_APP_BASE_URL=http://localhost:3000/api

五、权限管理与用户资料的Vuex共享

在登录后，我们需要根据用户的权限来控制界面的显示。可以在Vuex中存储权限信息，然后在组件中进行判断。

// store.js
state: {
  // ...
  permissions: [],
},
mutations: {
  SET_PERMISSIONS(state, permissions) {
    state.permissions = permissions;
  },
},
actions: {
  // ...
  fetchPermissions({ commit }) {
    // 假设从接口获取权限
    const mockPermissions = ['view_dashboard', 'edit_profile'];
    commit('SET_PERMISSIONS', mockPermissions);
  },
},

在组件中使用权限数据：

<template>
  <div>
    <button v-if="hasPermission('edit_profile')">编辑资料</button>
  </div>
</template>

<script>
export default {
  computed: {
    ...mapState(['permissions']),
  },
  methods: {
    hasPermission(permission) {
      return this.permissions.includes(permission);
    },
  },
};
</script>

总结

通过以上的代码示例和讨论，我们介绍了如何在Vue项目中使用Vuex管理用户数据、解决跨域问题、封装Axios以及进行权限管理。这些设计将有助于我们构建一个结构清晰、易于维护的前端应用。随着项目的不断发展，我们可以根据具体需求进一步优化和扩展这些功能。