小编dev*_*ius的帖子

为Nuxt.js编写客户端API库

这更像是一个架构/设计问题,而不是"为什么这不起作用".

我正在编写一个由外部API(ExpressJS)驱动的Nuxt.js SSR Web应用程序.API负责身份验证(通过nuxt-auth-JWT)和检索用户数据等.据我所知,SSR代码在客户端设置cookie并使用它来检索JWT,以便代表API服务器进行身份验证.浏览器.

我为数据库中的每个模型编写了一些辅助方法,如下所示(简化):

// services/UserService.js
export default class UserService {
  constructor(ctx) {
    this.$axios = ctx.$axios
  }

  getUsers () {
    return this.$axios.get('/api/users')
  }

  createUser (params) {
    return this.$axios.post('/api/users', params)
  }

  updateUser (params) {
    return this.$axios.put('/api/users/' + params.id, params)
  }

  getUser (id) {
    return this.$axios.get('/api/users/' + id)
  }
}
Run Code Online (Sandbox Code Playgroud)

这适用于SSR,因为我可以在我的Nuxt页面中执行此操作:

<template>{{user.display_name}}</template>

<script>
import UserService from '@/services/UserService'

export default {
  asyncData ({ params, $axios }) {
    const api = new ApiService({ $axios })

    return api.Users.getUser(params).then(user => {
      return { …
Run Code Online (Sandbox Code Playgroud)

server-side-rendering axios nuxt.js

6
推荐指数
1
解决办法
1639
查看次数

标签 统计

axios ×1

nuxt.js ×1

server-side-rendering ×1