vue获取后端token放入cooice过程

在Vue.js中，当你从后端服务器获取到token（通常用于身份验证）并将其存储起来时，可以按照以下步骤将token放在`localStorage`或者其他合适的地方，然后在设置请求头（如`Authorization`）时使用它：

1. **后端返回token**: 假设你在响应中接收到一个名为`access_token`的字段，你可以这样做：

axios.post('/login', data)
  .then(response => {
    const token = response.data.access_token; // 获取token
    localStorage.setItem('token', token); // 存储在本地存储
  })
  .catch(error => {
    console.error('Error fetching token:', error);
  });

2. **在每个API请求中使用token**:
使用Vuex管理状态时，可以在actions中封装一个函数，获取token并在发送请求前添加到headers:

import { mapActions } from 'vuex';
const { getTokenFromLocalStorage } = mapActions(['getToken']);

export default {
  async fetchData() {
    const token = await getTokenFromLocalStorage();
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    // 发送请求...
  }
}

如果不在使用Vuex，直接在组件内部，可以创建一个守卫（Guard），比如`beforeEach`，在每次导航前检查是否有token并设置header:

// router.beforeEach async guard
async function checkAuth(to, from, next) {
  const token = localStorage.getItem('token');
  if (!token) {
    // 没有token，重定向到登录页面或其他处理未授权操作的页面
    next({ path: '/login' });
  } else {
    // 设置 Authorization 头
    Vue.prototype.$http.interceptors.request.use(config => {
      config.headers.Authorization = `Bearer ${token}`;
      return config;
    }, error => Promise.reject(error));
    next(); // 接下来的路由操作
  }
}