nuxtフレームワークでルーティング認証にKoaとSessionを使用する方法

今回は、nuxt フレームワークでルーティング認証に Koa と Session を使用する方法について説明します。 nuxt フレームワークでルーティング認証に Koa と Session を使用する場合の

注意事項 は何ですか? 以下は実践的なケースです。見てみましょう。

はじめに

ブログのバックエンド管理ページにはログインシステムが必要なので、ルーティング認証を行うことを検討してください。 ちなみに、実装方法もNuxt公式サイトに記載されているものから書き換えています。フロントエンドとバックエンドのルーティングも統合されています。

ルートインターセプト

フロントエンドは主にNuxtのミドルウェア

を使用してルートインターセプトを行います。ここではVuexステートツリーも必要です。

ミドルウェア

middleware/auth.js

export default function ({ store, redirect }) {
 if (!store.state.user) {
  return redirect('/login')
 }
}

ステータスツリー上のユーザー情報が存在するか認証してページをリダイレクト

layouts/admin.vue

export default {
  middleware: 'auth',
  components: {
   AdminAside
  }
 }

システムをバックグラウンドで管理ミドルウェアを追加ページレイアウト

nuxtServerInit

NuxtJsのレンダリング処理では、リクエストが来ると最初にnuxtServerInitメソッドが呼び出され、このメソッドを通じてサーバーデータを事前に保存することができます。

このメソッドを使用して、ユーザー情報を格納するセッション情報を受信できます。

nuxtServerInit ({ commit }, { req, res }) {
  if (req.session && req.session.user) {
   const { username, password } = req.session.user
   const user = {
    username,
    password
   }
   commit('SET_USER', user)
  }
 },

アプリケーションが完了すると、サーバーから取得したデータの一部がこの状態ツリー (ストア) に埋められます。

NuxtJs 公式 Web サイトで示されている例によると、ページのルーティング認証部分の記述は基本的に完了しました。次のステップは、サーバー側のこの部分のコードを記述することです

Koa と koa- を使用します。 session

Koa と koa-session

バックエンド コードでは、Koa フレームワークと koa-session を使用してセッションを処理します。

新しい nuxt プロジェクトを作成するときに、Koa フレームワークを直接使用できます

vue init nuxt/koa

関連する依存関係

npm install koa-session

server.js で書き直す

import Koa from 'koa'
import { Nuxt, Builder } from 'nuxt'
// after end
import session from 'koa-session'
async function start () {
 const app = new Koa()
 const host = process.env.HOST || '127.0.0.1'
 const port = process.env.PORT || 7998
 // Import and Set Nuxt.js options
 let config = require('../nuxt.config.js')
 config.dev = !(app.env === 'production')
 // Instantiate nuxt.js
 const nuxt = new Nuxt(config)
 // Build in development
 if (config.dev) {
  const builder = new Builder(nuxt)
  await builder.build()
 }
 // body-parser
 app.use(bodyParser())
 // mongodb
 // session
 app.keys = ['some session']
 const CONFIG = {
  key: 'SESSION', /** (string) cookie key (default is koa:sess) */
  /** (number || 'session') maxAge in ms (default is 1 days) */
  /** 'session' will result in a cookie that expires when session/browser is closed */
  /** Warning: If a session cookie is stolen, this cookie will never expire */
  maxAge: 86400000,
  overwrite: true, /** (boolean) can overwrite or not (default true) */
  httpOnly: true, /** (boolean) httpOnly or not (default true) */
  signed: true, /** (boolean) signed or not (default true) */
  rolling: false /** (boolean) Force a session identifier cookie to be set on every response. The expiration is reset to the original maxAge, resetting the expiration countdown. default is false **/
 }
 app.use(session(CONFIG, app))
 // routes
 app.use(async (ctx, next) => {
  await next()
  ctx.status = 200 // koa defaults to 404 when it sees that status is unset
  return new Promise((resolve, reject) => {
   ctx.res.on('close', resolve)
   ctx.res.on('finish', resolve)
   nuxt.render(ctx.req, ctx.res, promise => {
    // nuxt.render passes a rejected promise into callback on error.
    promise.then(resolve).catch(reject)
   })
  })
 })
 app.listen(port, host)
 console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console
}
start()

koa-session の使用方法については、次を参照してください: Learn cookie and from koa-セッションミドルウェア session

ログインルーティング

// 登录
router.post('/api/login', async (ctx, next) => {
 const { username, password } = ctx.request.body
 let user,
  match
 try {
  user = await Admin.findOne({ user: username }).exec()
  if (user) {
   match = await user.comparePassword(password, user.password)
  }
 } catch (e) {
  throw new Error(e)
 }
 if (match) {
  ctx.session.user = {
   _id: user._id,
   username: user.user,
   nickname: user.nickname,
   role: user.role
  }
  console.log(ctx.session)
  return (ctx.body = {
   success: true,
   data: {
    username: user.user,
    nickname: user.nickname
   }
  })
 }
 return (ctx.body = {
  success: false,
  err: '密码错误'
 })
})

ここに書くと、基本的に関数全体の処理は完了しており非常にスムーズですが、私にとって順風満帆なコードはありません。

sessionが定義されていません

問題

nuxtServerInit ({ commit }, { req, res }) {
  if (req.session && req.session.user) { // res.session is not defined
   const { username, password } = req.session.user
   const user = {
    username,
    password
   }
   commit('SET_USER', user)
  }
 }

nuxtServerInitではセッションに関する情報が取得できないのですが、他のAPIではセッションが取得できるのですが、その時は原因が分からなかったので何か問題があるのではないかと思いました。リリと一緒に。 。

理由

公式ウェブサイトで示されているように、最後の問題は依然として私の不注意といくつかの詳細の無視によるものです:

app.post('/api/login', function (req, res) {
 if (req.body.username === 'demo' && req.body.password === 'demo') {
  req.session.authUser = { username: 'demo' }
  return res.json({ username: 'demo' })
 }
 res.status(401).json({ error: 'Bad credentials' })
})

セッションは req.session に保存されるため、nuxtServerInit セッションは存在します。 req.session で、Koa2 と Koa-session を使用します。Koa-session は、req.session には存在しない ctx.session にクッキーを解析します。

解決策

そのため、nuxt.render を挿入するときに、リクエストにセッションを追加します

app.use(async (ctx, next) => {
  await next()
  ctx.status = 200 // koa defaults to 404 when it sees that status is unset
  ctx.req.session = ctx.session
  return new Promise((resolve, reject) => {
   ctx.res.on('close', resolve)
   ctx.res.on('finish', resolve)
   nuxt.render(ctx.req, ctx.res, promise => {
    // nuxt.render passes a rejected promise into callback on error.
    promise.then(resolve).catch(reject)
   })
  })
 })

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、 の他の関連記事に注目してください。 PHPの中国語サイトです！

推奨読書:

jQueryを使用したファジークエリを実装する手順の詳細な説明

node Async/Await 非同期プログラミング実装の詳細な説明

🎜

以上がnuxtフレームワークでルーティング認証にKoaとSessionを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。