是否有任何（简单）方法可以将变量从 Express 传递到 Vue.js？

Question

好的，所以我才刚刚开始学习 Vue.js，而且，例如，仅使用 EJS 时，很难做一些非常简单的事情。对于我当前的项目，我几乎要放弃 Vue，因为我只是不知道如何将 res.locals.something 从 Express 服务器传递到 Vue 前端。顺便说一句，这是 Passport.js 的东西——当经过身份验证时，用户应该被重定向，但我必须将用户是否登录的信息传递给 Vue (res.locals.isLogged = req.isAuthenticated();)，而这在我目前的情况下似乎是不可能的（接近0) Vue.js 技能...我找到的唯一解决方案是在客户端使用 ajax（我选择 axios）请求，在服务器上定位 /login/facebook 路由，然后我可以将 Express 的响应传递给 Vue，但由于该死的 CORS 问题，它无法工作。因此，我无法使用 ajax 从 Express 中检索数据，并且 Express 和 Vue 不像 Express 和 EJS 或 Pug 那样原生连接。

简而言之 - 有谁知道将 Express 变量传递给 Vue 的简单方法，不包括 Vue SSR、Express-vue 模块等？

附：我没有使用 Webpack 或任何类似的东西（所以，没有 .vue 文件等） - 只是一个简单的 index.html 文件，其中 Vue 从 CDN 加载。

Answer 1

好的，作为肮脏的解决方法，我想到的一件事是使用 .ejs 而不是 .html 扩展名，因此我可以将变量传递给 ejs，但我认为它不起作用。我所做的只是将我的 index.html 重命名为 index.ejs，将 res.locals.isLogged 传递给 ejs 模板，并且 Vue 和 ejs 渲染的应用程序部分正在以某种方式协同工作......

所以，这是肮脏的（某种）解决方案......

Answer 2

问题已经得到解答，但我不熟悉.ejs，无法遵循解决方案。对于像我这样的人，我所做的是：

1. 使用res.locals 或res.render('file.pug', data) 发送data
2. 将作为 html 数据属性接收的数据设置为标签（例如：p(id="myParagraph" data-myData= data)
3. 使用设置 Vuex 存储的状态

mounted : function () {
  this.$store.state.myData = document.getElementById("myParagraph").getAttribute("data-myData");
}

同样可以用来设置vue根实例的data属性。

从这里开始，您可以在需要时随时使用数据并保持反应性。

Answer 3

使用res.locals，您走在正确的轨道上。要访问视图中 JS 中的变量，您必须将值包装在一个字符串中：console.log('#{isLogged}')。请参阅下面的示例

app.js

const express = require('express')
const app = express()

app.set('view engine', 'pug')

app.use((req, res, next) => {
  res.locals.isLogged = false
  next()
})

app.get('/', (req, res) => {
  res.render('index')
})

app.listen(3000, () => {
  console.log('listening on 3000')
})

views/index.pug

doctype html
html
  head
    title= title
  body
    h1= text
  script.
    console.log('#{isLogged}') // false