编程日志：Nuxt 二

大约一个月前写过一篇有关Nuxt的编程日志；之后继续自学Nuxt框架。

其实在掌握了如何加入其他脚本、程序库之后发现基本上又回到了写VueJS的模式。

这里我说的是基本上，原因就是还会有少数不一样的地方。比方说往常我是在Vue的Routing路由上面搞用户验证。

router.beforeEach(async (to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 读取储存的用户信息 - 用户名存vuexStoredUser，JWT存vuexStoredToken
    try {
        const bear = {
          headers: { Authorization: `Bearer ${vuexStoredToken}` }
        };
        const requestData = {
          // 加入需要验证用户的数据
        };
        const response = await axios.post("/api/v1/auth", requestData, bear);
        if (ajaxCompare(response.data.errno)) {
          // 验证成功要做的事情
        }
        else {
          next("/");
          return
        }
    } catch (error) {
      console.error(error);
      next("/error");
      return;
    }
  }

上面这一段就是我经常在VueJS中使用的验证用户是否已经登录的方程。

而在Nuxt中，并没有需要自己搭架的路由；找不到/src/router/index.js这么一个文档。

那么在Nuxt中想要做同样的事情则需要Nuxt中的中间件middleware。

export default defineNuxtRouteMiddleware((to, from) => {
  if (process.client) {
    // 读取储存的用户信息 - 用户名存vuexStoredUser，JWT存vuexStoredToken
    try {
      // AJAX call
      if (ajaxCompare(response.data.errno)) {
        // 验证成功要做的事情
      }
      else {
          return navigateTo("/")
      }
    }  catch (error) {
      console.error(error);
      next("/error");
      return;
    }
  }
})

在/middleware/目录下建一个***.ts，用上面这段代码的格式写一段验证的方程就可以了。

---

GraghQL

折腾了一段时间，要开始练习连接后端。前端写的再好，没有后端的数据，前端也是个摆设。还不如弄一个Wordpress或者Drupal之类的呢。

就我目前架设的练习环境并没有后端；所以我要借助一下别人的数据。

我并不想在弄一个Axios去连接啥网络上JSON文件了。这东西写过那么多了，没必要在这里重复。

于是我想弄一下GraphQL。

原来在Node里面写过一点点GraphQL的代码，不过生活中并没有那么多的项目需要我接触这些。现在正好拿来练手。

在我经常鬼混的另一个区块链马特市开放了GraphQL的服务。虽然已经好几年了，但是我一直无动于衷的没有去研究。虽然有点晚了，不过正好练手GraphQL，就拿来试一试。

首先先看一下我已经会了的东西。原来在Node下的index.js里面加入：

const { GraphQLClient, gql } = require("graphql-request");

/* Set up a GraphQL client with the URL of the GraphQL API endpoint */
const client = new GraphQLClient("https://xxx.xxx/graphql");

用client就可以连接上指定的GraphQL服务端。不过Node是后端。现在只有前端的前提下，应该方法不同？

首先安装GraphQL的程序库apollo。

yarn add @nuxtjs/apollo

在上一篇编程日志中写过，Nuxt框架下导入程序库是在/nuxt.config.ts文件中。导入apollo也是一样。

export default defineNuxtConfig({
  //...
  apollo: {
    clients: {
      default: {
        httpEndpoint: "https://server.matters.news/graphql"
      }
    },
  },
  //...
})

在文件中写入apllo的设置。马特市的GraphQL服务网址是https://server.matters.news/graphql，就在这里直接定义了。

这里要先讲一下GraphQL。简单来说其实就是利用HTTP去读数据库的数据。其拥有两种调用方法。一个是query，另一个是mutation，本意一个是读另一个是写。最基本的数据库的两个功能。

获取马特市的用户验证令牌的方法是：

const query = gql`
  mutation($userEmail: email_String_NotNull_format_email!, $userPasswd: String!) {
    userLogin(input: {
      email: $userEmail,
      password: $userPasswd
    }) {
      token
    }
  }
`;

注意这里不是纯读取数据了，所以用的是mutation。上一段代码基本上就是给我的用户邮箱外加密码；收到的是新生成的用户验证令牌。

在Nuxt的Component中，写一个methods，里面加上：

        try {
          const { data } = await useAsyncQuery(query, variables);
          if (typeof (data.value as any).userLogin !== "undefined" && typeof (data.value as any).userLogin.token !== "undefined") {
            const token = (data.value as any).userLogin.token;
            localStorage.setItem("mattersToken", token);
            localStorage.setItem("mattersEmail", this.form.email);
          }
          else {
            console.error("token does not exist")
          }
        }
        catch (error) {
          console.error(error)
        }

我知道我知道，JWT不应该存在localStorage里面，容易被黑；TypeScript中最好先设定好类型type，要不然为啥叫TypeScript。在我练习的这个小环境内，没有后端，就暂时存在浏览器中吧。

除去上面提到的两个“小问题”之外，很轻从第获得马特市的用户验证令牌。

我们还能利用马特市的GraphQL做点什么？

起码能够读取自己写过的文章。在Nuxt中启动GraphQL的方法是一样的。读自己的文章的指令是：

const query = gql`
query($userName: String!, $after: String) {
  user(input: {userName: $userName}) {
    articles(input: {first: 20, after: $after}) {
      totalCount,
      pageInfo {
        hasNextPage
        endCursor
      },
      edges {
        node {
          author {
            userName
          },
          id,
          createdAt,
          revisedAt,
          title,
          cover,
          dataHash,
          mediaHash
        }
      }
    }
  }
}`;

这里的userName当然就是我自己的账号，当然也可以用同样的方法搜别人的文章。

{first: 20, after: $after}就想MySQL或者MariaDB中的LIMIT 20和WHERE id > $after用于只读取20条数据和从哪条数据开始读。

mediaHash则是每一篇文章的连接。

马特市的GraphQL还有很多其他的功能，比如说：

const query = gql`
    mutation {
      appreciateArticle(input: {
        id: "${articleId}",
        amount: 5
      }) {
        id
        title
      }
    }
  `;

上面这一段就是利用GraphQL的API给指定的文章点赞。不过这些已经超出我练习Nuxt的范围，就不在Nuxt的编程日志中罗嗦了。

到目前为止，我的一个疑问是如何将取回的用户验证令牌存到HTTP标头中。前面介绍在nuxt.config.ts文件中已经定义了Apollo的所有设置。不可能在中途再加上去啥信息。

看来还得要使用Axios来传递信息。唉~~转了半天可能又要回到过去经常写代码的手法。不过没关系，学新东西不等于要放弃所有已经会了的。回来加入Axios继续……