Javascript 如何使用我自己的后端api在nuxt应用程序中获取令牌(登录时)?

Javascript 如何使用我自己的后端api在nuxt应用程序中获取令牌(登录时)?,javascript,request,jwt,token,nuxt.js,Javascript,Request,Jwt,Token,Nuxt.js,我正在和另一个人做一个项目。 我在做后端部分,他在做前端部分 我们的用户可以注册和登录,但我们无法获得我在后台api中生成的令牌 我试图找到一些来源来做这件事,但似乎没有什么适合我们的情况 我们怎么能做到呢 谢谢:) 正面: <form @submit.prevent="login" method="post"> <div class="group_field"> <input id="email" v-model="email"

我正在和另一个人做一个项目。 我在做后端部分,他在做前端部分

我们的用户可以注册和登录,但我们无法获得我在后台api中生成的令牌

我试图找到一些来源来做这件事,但似乎没有什么适合我们的情况

我们怎么能做到呢

谢谢:)

正面:

    <form @submit.prevent="login" method="post">
      <div class="group_field">
        <input id="email" v-model="email" type="email" name="email" required>
        <label for="email">Email</label>
      </div>
      <div class="group_field">
        <input id="password" v-model="pswd" type="password" name="password" required>
        <label for="password">Password</label>
      </div>
      <button type="submit">
        Login
      </button>
      <small>Pas de compte ? <nuxt-link to="/register">S'inscrire</nuxt-link></small>
    </form>

<script>
export default {

  data () {
    return {
      email: '',
      pswd: '',
      token: '',
      error: null
    }
  },

  methods: {
    async login () {
      try {
        await this.$axios.post('http://localhost:3080/login', {
          email: this.email,
          pswd: this.pswd,
          token: this.token
        })

        this.$router.push('/')
      } catch (e) {
        this.error = e.response.data.message
      }
    }
  }

}
</script>
users.js:

export const logUser = async (req, res) => {
    if (!req.body.email || !req.body.pswd) return throwBadRequest('Missing parameters', res);
    if (!await utils.validateEmail(req.body.email)) return throwBadRequest('Wrong email format', res);
    if (!await utils.validatePassword(req.body.pswd)) return throwBadRequest('Wrong password formatmust be: at least 3 char long with 1 uppercase 1 lowercase and 1 number', res);
    await UserModel.fetchUser(req.body.email, req.body.pswd, (err, result) => {
        if (err) return throwIntServerError(err, res);
        req.token = { token: result };
        return sendOKWithData({ auth: true, token: result }, res);
    });
}
userModel.js:

UserSchema.statics.fetchUser = async function (userEmail, userPswd, cb) {
    await this.findOne({ userEmail }, async (err, user) => {
        if (err) return cb(err);
        if(!user) return cb(new Error('user Not Found'));
        const isValid = await bcrypt.compare(userPswd, user.userPswd);
        if(isValid === true) {
            let token = jwt.sign({ userEmail: userEmail, userPswd: userPswd }, secret, {expiresIn: 86400});
            return cb(null, token);
        } else {
            return null;
        }
    });
}

我个人使用Nuxt auth登录和注册用户。这很方便,因为主配置是在nuxt.config.js中设置的。使用axios,我们在Nuxt Auth中内置了专用函数。也许我没有集中帮助解决这个问题,但也许我指出了另一个解决方法。

是的,我看到auth中有一些函数,比如setToken()或clearToken()。我现在可以在登录时获得我的令牌,但我不能在注销时使用clearToken销毁令牌。一些想法?也许这有帮助。我之前发现了这一点,但我没有找到解决方案,但我最终得到了一些结果:)我很难理解nuxt体系结构及其工作原理(我是学生^^)你同意保持联系吗?
UserSchema.statics.fetchUser = async function (userEmail, userPswd, cb) {
    await this.findOne({ userEmail }, async (err, user) => {
        if (err) return cb(err);
        if(!user) return cb(new Error('user Not Found'));
        const isValid = await bcrypt.compare(userPswd, user.userPswd);
        if(isValid === true) {
            let token = jwt.sign({ userEmail: userEmail, userPswd: userPswd }, secret, {expiresIn: 86400});
            return cb(null, token);
        } else {
            return null;
        }
    });
}