So verwenden Sie Koa und Session für die Routing-Authentifizierung im Nuxt-Framework

Dieses Mal erkläre ich Ihnen, wie Sie Koa und Session für die Routing-Authentifizierung im Nuxt-Framework verwenden. Welche Vorsichtsmaßnahmen gelten für die Verwendung von Koa und Session für die Routing-Authentifizierung im Nuxt? Framework? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Einführung

Die Backend-Verwaltungsseite des Blogs benötigt ein Anmeldesystem. Erwägen Sie daher eine Routing-Authentifizierung. Die Implementierungsmethode ist ebenfalls angegeben Die offizielle Nuxt-Website Chestnut wurde neu geschrieben und das Front-End- und Back-End-Routing wurde ebenfalls vereinheitlicht.

Routenabfang

Das Frontend verwendet hauptsächlich die Middleware von Nuxt, um das Abfangen von Routen durchzuführen Dazu wird der Zustandsbaum verwendet.

middleware

middleware/auth.js

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

Authentifizierung der Seite durch Überprüfung, ob die Benutzerinformationen im Statusbaum vorhanden sind 🎜>

layouts/admin.vue

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

zum Hinzufügen von Middleware

nuxtServerInit

Seitenlayout des Hintergrundverwaltungssystems 🎜 >Wenn im Rendering-Prozess von NuxtJs eine Anfrage eingeht, wird zuerst die nuxtServerInit-Methode aufgerufen. Diese Methode kann verwendet werden, um die Daten des Servers im Voraus zu speichern.

Mit dieser Methode können wir Sitzungsinformationen empfangen, in denen Benutzerinformationen gespeichert werden.

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

Wenn die Anwendung abgeschlossen ist, werden einige Daten, die wir vom Server erhalten haben, in diesen Statusbaum (Speicher) eingetragen.

Gemäß dem Beispiel auf der offiziellen Website von NuxtJs haben wir den Routing-Authentifizierungsteil der Seite im Grunde fertig geschrieben. Der nächste Schritt besteht darin, den Code für diesen Teil der Serverseite zu schreiben

Koa und Koa-Sitzung verwenden

Koa und Koa-Sitzung

Der Back-End-Code, den ich verwende, ist das Koa-Framework und koa-session zur Verarbeitung der Sitzung.

Beim Erstellen eines neuen Nuxt-Projekts können Sie direkt das Koa-Framework auswählen

vue init nuxt/koa

Verwandte Abhängigkeiten

npm install koa-session

In server.js umschreiben

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()

Für Koa - Informationen zur Verwendung von Sitzungen finden Sie unter: Cookies und Sitzungen von der Koa-Session-Middleware lernen

Login-Routing

// 登录
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: '密码错误'
 })
})

Hier geschrieben , die gesamte Funktion Der Prozess ist grundsätzlich abgeschlossen und sehr reibungslos, aber für mich gibt es keinen reibungslosen Segelcode.

Sitzung ist nicht definiert

Problem

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)
  }
 }

In nuxtServerInit können keine Informationen über die Sitzung abgerufen werden, aber andere APIs können die Sitzung unter abrufen Da ich damals den Grund nicht finden konnte, hatte ich einmal den Verdacht, dass mit den Kastanien etwas nicht stimmte. .

Ursache

Das letzte Problem ist auf meine eigene Nachlässigkeit und Vernachlässigung einiger Details zurückzuführen:

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' })
})

Die Sitzung wird in req.session gespeichert, sodass die nuxtServerInit-Sitzung in req.session vorhanden ist. Ich verwende jedoch Koa2 und Koa-session analysiert das Cookie in ctx.session, das in req nicht vorhanden ist. Sitzung.

Lösung

Wenn Sie also nuxt.render injizieren, fügen Sie der Anfrage eine Sitzung hinzu

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)
   })
  })
 })

Ich glaube, Sie haben es gemeistert, nachdem Sie den Fall hier gelesen haben Artikel Weitere spannende Methoden finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Implementierung von Fuzzy-Abfragen mit jQuery

Detaillierte Erläuterung von Node Async/ Warten Sie auf asynchrone Programmierung

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Koa und Session für die Routing-Authentifizierung im Nuxt-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!