小编Jak*_*hne的帖子

如何使用 Nuxt Auth 模块在 Vuex 中保存 JWT 令牌?

我目前正在尝试使用 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 …

authentication express jwt bearer-token nuxt.js

5
推荐指数
1
解决办法
1万
查看次数

Flutter:如何让 TextField 专注于提交?

我使用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)

亲切的问候,

雅各布

tags focus textfield hashtag flutter

5
推荐指数
1
解决办法
3671
查看次数

如何使用 Nuxt Auth 模块在 Vuex 中重新获取用户?

简短问题:是否可以通过 Nuxt Auth 模块手动更新 Vuex 中的用户数据?

为什么我有这个问题:我的问题是这个。我在用户文档中的 MongoDB 中保存了一些 Likes/Follows。我的身份验证是通过 Nuxt Auth 实现的。Nuxt Auth 在登录时将我的用户文档存储在 Vuex 中。

如果用户现在喜欢某样东西,它会存储在数据库中,但是我没有在Vuex中进入Nuxt Auth的auth状态。

另一种选择(我认为)是在 Vuex 中以与在数据库中相同的方式更改数据。但是在这里我遇到了 Vuex 的“严格”模式的问题。

对我有用的一种可能性是在单独的状态下再保存一次用户数据,并始终手动更新它。但是我真的需要在 Vuex 中多次保存用户数据吗?对我来说没有意义。

vuex nuxt.js

3
推荐指数
1
解决办法
1939
查看次数

如何在 Vuetify 2.0.5 中设置 v-sheet/v-container 大小以匹配屏幕与 v-app-bar?

我正在尝试在我的 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 的普通“工具栏”,即使应用栏更好。

此致,

雅各布

nuxt.js vuetify.js

3
推荐指数
1
解决办法
3128
查看次数