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

Dieses Mal zeige ich Ihnen, wie Sie das Nuxt-Framework für die Routing-Authentifizierung bedienen und Koa verwenden, und Session Hinweise, wie Sie das Nuxt-Framework für die Routing-Authentifizierung bedienen und Koa verwenden und Session

Was sind das? Hier sind tatsächliche Fälle.

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 Lizi hat es neu geschrieben und auch das Front-End- und Back-End-Routing vereinheitlicht.

Routenabfang

Das Front-End 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 Code.

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 Damals hatte ich, weil ich den Grund nicht finden konnte, 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 Sitzung in nuxtServerInit 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:

Wie man mit dem Problem der Asynchron-/Wartezeitverschwendung umgeht

JQuery-Implementierung von Fuzzy-Abfragen in der Praxis Analyse

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