vue项目如何使用uuid设置token

在 Vue 项目中使用 uuid 生成 token 并存储在本地，可以按照以下步骤操作：

1. 安装 uuid 库

使用 npm 安装 uuid 库：

npm install uuid

2. 在需要生成 token 的地方导入 uuid 库

在需要生成 token 的地方导入 uuid 库：

import { v4 as uuidv4 } from 'uuid'

3. 使用 uuid 生成 token

可以在登录成功后使用 uuid 生成 token，并将其存储在本地的 localStorage 中：

const token = uuidv4()
localStorage.setItem('token', token)

4. 在请求头中添加 token

在需要发送请求的地方，可以从 localStorage 中获取 token 并添加到请求头中：

const token = localStorage.getItem('token')
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`

这样就可以在 Vue 项目中使用 uuid 生成 token 并存储在本地，然后在请求头中添加 token 了。

相关问题

$(document).ready(function () { localStorage.removeItem('token'); console.log("token",getUrlParam('token')); localStorage.setItem('token',getUrlParam('token')); uuid = getUUID(); addShebi(); checkToken();这是vue的语言吗

不完全正确。这段代码看起来是使用 JavaScript 编写的，而不是 Vue.js。Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面。它提供了一些特殊的语法和功能，用于创建组件化的应用程序。

然而，您提供的代码片段中，并没有涉及到 Vue.js 的任何内容。这只是一段普通的 JavaScript 代码，使用了一些 DOM 操作和 Web Storage API（localStorage）。

如果您要使用 Vue.js，您需要在项目中引入 Vue.js 库，并按照 Vue.js 的语法和规则编写代码。Vue.js 提供了一些特定的生命周期钩子函数，用于在组件渲染完成后执行特定的操作。

例如，在 Vue.js 中，可以使用 `mounted` 钩子函数来在组件渲染完成后执行初始化操作。以下是一个示例：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    // 在组件渲染完成后执行的初始化操作
    localStorage.removeItem('token');
    console.log("token", getUrlParam('token'));
    localStorage.setItem('token', getUrlParam('token'));
    uuid = getUUID();
    addShebi();
    checkToken();
  },
  methods: {
    // 自定义方法
  }
}
</script>

<style>
/* 样式定义 */
</style>

请注意，上述示例中的代码片段是一个简化的 Vue 单文件组件示例，需要在 Vue 项目中使用。如果您只是想在纯 JavaScript 中执行一些操作，那么您提供的代码片段是有效的，不需要使用 Vue.js。

Node 代理多个 vue的前端dist项目，使用cursf进行全部路由防护时，为什么会出现路径不一样是报错，无效的csrftoken，请代码正确示例，配置，cursf，cors，session等，

在Node.js中代理多个Vue前端项目的dist目录，并使用`cors`和`csurf`进行跨源请求防护及CSRF令牌验证时，可能会遇到因为不同的路由导致CSRF令牌验证失败的问题。这通常是因为`csurf`中间件默认会在每个请求上查找名为`csrfToken`的cookie，如果请求是从另一个源发起的，并且没有正确的cookie设置，就会导致验证失败。

为了解决这个问题，你可以在`csurf`中间件中设置`cookie`选项，以确保cookie能够跨域设置。同时，确保`cors`中间件允许跨域的请求，并且设置`credentials`为`true`以允许cookie在跨域请求中携带。

以下是一个简单的示例代码，展示如何配置`csurf`和`cors`中间件，以及如何在session中处理CSRF令牌：

const express = require('express');
const cors = require('cors');
const csrf = require('csurf');
const cookieSession = require('cookie-session');

const app = express();
const csrfProtection = csrf({ cookie: true });

// 设置session中间件，注意session的secret
app.use(cookieSession({
  name: 'session',
  keys: ['key1', 'key2'], // 多个用于更安全的加密
  maxAge: 24 * 60 * 60 * 1000 // 过期时间
}));

// 允许跨域请求，并携带凭证（如cookie）
const corsOptions = {
  origin: 'http://example.com', // 你的Vue项目的地址
  credentials: true,
  allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With', 'device-uuid', 'Access-Control-Allow-Origin'],
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
  preflightContinue: false,
  optionsSuccessStatus: 204
};
app.use(cors(corsOptions));

// 在路由处理之前应用csurf保护中间件
app.use(csrfProtection);

// 路由示例
app.get('/some-route', (req, res) => {
  // 如果请求通过了csurf验证，req.csrfToken()将可用
  res.cookie('XSRF-TOKEN', req.csrfToken());
  res.send('Welcome to some route!');
});

// Vue项目代理配置（使用http-proxy-middleware）
const { createProxyMiddleware } = require('http-proxy-middleware');
app.use('/api', createProxyMiddleware({
  target: 'http://localhost:8080', // 你的Vue项目的API服务器地址
  changeOrigin: true,
}));

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

请根据你的实际项目情况调整上述代码中的配置。