我目前正在尝试使用 VueJS 将 VueJS 页面转换为 NuxtJS。不幸的是,我在验证用户时遇到了一些问题,我在 Google 中找不到解决方案。我只为客户端使用 Nuxt。该 API 在 express 中是完全独立的,并且可以与现有的 VueJS 站点一起使用。
在 Nuxt 中,我现在使用 Auth 模块向我的 Express Server/Api 发送一个带有用户名和密码的请求。Api 接收数据,进行检查,然后在 MongoDB 中找到帐户。这完全按照它应该的方式工作。或者像我认为的那样。现在我获取用户对象并从中生成 jwt。我可以调试到这里的所有内容并且它可以工作。现在我可能只是不知道如何继续调试它。我将带有 res.json(user, token) 的答案发送回 Nuxt 客户端(代码如下)。正如我所说,在我当前的 VueJS 页面中,我也可以处理这个问题。同样在 Nuxt 页面中,我在开发控制台中看到了答案,据我所知,答案是合适的。
现在一些代码。express Api 上的登录部分:
const User = require('../models/User')
const jwt = require('jsonwebtoken')
const config = require('../config/config')
函数 jwtSignUser(user){
const ONE_YEAR = 60 * 60 * 24 * 365
返回 jwt.sign(user,config.authentication.jwtSecret, {
过期时间:ONE_YEAR
})
}
模块.出口 = {
异步登录(请求,资源){
控制台.log(req.body)
尝试{
const {用户名,密码} = req.body
const … 我使用https://pub.dev/packages/flutter_tags作为标签输入。通过按键盘上的提交并清除 TextInput 字段,将一个标签添加到标签数组中。
现在我的问题是提交键盘也会关闭。所以你必须为每个标签再次按下该字段,这不是事情的意义。有很多关于如何关闭键盘的说明,但没有关于如何让它保持打开状态的说明。
当按下提交时,该字段失去焦点,因此键盘关闭。我的想法是,不幸的是没有成功,将新的重点放在 onSubmitted 上。不幸的是,这里什么也没发生:
TextField(
controller: myController,
focusNode: myFocusNode,
// more code
onSubmitted: (String str) {
myController.clear();
myFocusNode.requestFocus();
}
)
Run Code Online (Sandbox Code Playgroud)
亲切的问候,
雅各布
简短问题:是否可以通过 Nuxt Auth 模块手动更新 Vuex 中的用户数据?
为什么我有这个问题:我的问题是这个。我在用户文档中的 MongoDB 中保存了一些 Likes/Follows。我的身份验证是通过 Nuxt Auth 实现的。Nuxt Auth 在登录时将我的用户文档存储在 Vuex 中。
如果用户现在喜欢某样东西,它会存储在数据库中,但是我没有在Vuex中进入Nuxt Auth的auth状态。
另一种选择(我认为)是在 Vuex 中以与在数据库中相同的方式更改数据。但是在这里我遇到了 Vuex 的“严格”模式的问题。
对我有用的一种可能性是在单独的状态下再保存一次用户数据,并始终手动更新它。但是我真的需要在 Vuex 中多次保存用户数据吗?对我来说没有意义。
我正在尝试在我的 nuxt 网站上使用“带有滚动缩小和图像的突出”v-app-bar。
Vuetify 的代码是:
<v-card class="overflow-hidden">
<v-app-bar
absolute
color="#fcb69f"
dark
shrink-on-scroll
src="https://picsum.photos/1920/1080?random"
scroll-target="#scrolling-techniques-2"
>
[...]
</v-app-bar>
<v-sheet
id="scrolling-techniques-2"
class="overflow-y-auto"
max-height="600"
>
<v-container style="height: 1000px;">
<nuxt />
</v-container>
</v-sheet>
</v-card>
Run Code Online (Sandbox Code Playgroud)
如果我理解正确,那么页面的内容必须在 v-container 中,在那里我有我的 nuxt 根元素。到目前为止效果很好。v-sheet 或 v-container 不会填满整个页面。如果我尝试将其设置为 100%/100vh 以填充小型智能手机屏幕以及大型 PC 显示器上的空间,则应用栏不再可滚动,或者整个页面不再可滚动,或者内容在 v-container 中远远低于屏幕边缘,即使您一直向下滚动。
我希望我只是忽略了一件愚蠢的小事。如果没有,那么我可能不得不使用 Vuetify 的普通“工具栏”,即使应用栏更好。
此致,
雅各布