token放在本地存储和vuex

将token放在本地存储(localstorage)和vuex的主要区别在于存储位置和数据的持久性。localstorage是一种本地存储方式，将数据以文件的方式存储在本地，并且具有永久保存的特性。而vuex是一种内存存储方式，数据只在当前会话期间有效，刷新页面或关闭浏览器后会丢失。

对于token这样的敏感信息，建议将其存储在vuex中。由于vuex的数据存储在内存中，相对来说更加安全，不容易被第三方恶意获取。另外，由于token的有效期较短，只在当前会话期间有效，存储在vuex中也更加符合token的使用场景。

如果需要在用户关闭浏览器或刷新页面后仍然保持登录状态，可以考虑将token存储在本地存储(localstorage)中。这样可以实现持久保存，下次打开网页时可以读取本地存储中的token，避免重新登录。

相关问题

vue2项目中 已知生产环境的token，怎么在本地跑生产环境

在Vue2项目的本地开发环境中，如果你需要模拟生产环境并使用已知的token，你可以通过以下步骤操作：

1. **配置环境变量**:
- 创建一个`.env`文件（通常放在项目的根目录下，如果不存在就新建），这是一个环境配置文件，用于存储敏感信息如API token等。例如：

     VUE_APP_TOKEN=your_production_token_here

- 将此文件添加到`.gitignore`中，避免版本控制中泄露敏感数据。

2. **使用环境变量插件**:
- 使用Vue CLI提供的`vue.config.js`配置文件来处理环境变量。安装`@vue/cli-plugin-eslint`和`vue-cli-plugin-vuex`（如果要用到状态管理库Vuex）：

     npm install @vue/cli-plugin-eslint vuex --save-dev

- 在`vue.config.js`中添加环境变量加载：

     module.exports = {
       // ...其他配置
       chainWebpack(config) {
         if (process.env.NODE_ENV === 'production') {
           config.resolve.alias.set('@env', path.resolve(__dirname, '../.env'))
         }
       },
     }

- 现在，你可以直接在代码中使用`process.env.VUE_APP_TOKEN`访问这个token。

3. **运行应用**:
- 启动开发服务器：

     npm run serve

- 如果你正在使用代理或axios等工具，记得设置它们也去读取这个环境变量。

4. **注意安全**:
- 仅在开发阶段使用这种方式，并确保在部署时从实际环境获取token，防止敏感信息泄漏。

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(); // 接下来的路由操作
  }
}