Comment utiliser Koa et Session pour l'authentification de routage dans le framework Nuxt

Cette fois, je vais vous expliquer comment utiliser Koa et Session pour l'authentification de routage dans le framework Nuxt Quelles sont les précautions pour l'utilisation de Koa et Session pour l'authentification de routage dans Nuxt. framework ? , ce qui suit est un cas pratique, jetons un coup d'œil.

Introduction

La page de gestion backend du blog a besoin d'un système de connexion, pensez donc à faire une authentification de routage La méthode de mise en œuvre est également donnée par. le site officiel de Nuxt, Chestnut, a été réécrit et le routage front-end et back-end a également été unifié.

Interception d'itinéraire

Le front-end utilise principalement le middleware de Nuxt pour effectuer l'interception d'itinéraire est également requis ici. . L'arbre d'état est utilisé pour le faire.

middleware

middleware/auth.js

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

Authentifier la page en authentifiant si les informations utilisateur sur l'arborescence d'état existent Redirection

layouts/admin.vue

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

Ajouter un middleware

nuxtServerInit sur la

mise en page du système de gestion en arrière-plan

Dans le processus de rendu de NuxtJs, lorsqu'une requête arrive, la méthode nuxtServerInit est appelée en premier et les données du serveur peuvent être enregistrées à l'avance via cette méthode.

Nous pouvons utiliser cette méthode pour recevoir des informations de session qui stockent les informations de l'utilisateur.

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

Une fois l'application terminée, certaines données que nous avons obtenues du serveur seront renseignées dans cet arbre d'état (magasin).

Selon l'exemple donné par le site officiel de NuxtJs, nous avons pratiquement terminé d'écrire la partie authentification de routage de la page. L'étape suivante consiste à écrire le code de cette partie côté serveur

Utiliser Koa et koa-session

Koa et koa-session

Le code back-end que j'utilise est le framework Koa et koa-session pour traiter la session.

Vous pouvez utiliser directement le framework Koa lors de la création d'un nouveau projet nuxt

vue init nuxt/koa

Dépendances pertinentes

npm install koa-session

Réécrire dans 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()

Pour l'utilisation de koa-session, vous pouvez vous référer à : Apprentissage des cookies et des sessions à partir du middleware koa-session

Routage de connexion

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

Jusqu'à présent, l'ensemble du processus fonctionnel est fondamentalement terminé et très fluide, mais pour moi, il n'existe pas de code de navigation fluide.

la session n'est pas définie

Problème

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

Aucune information sur la session ne peut être obtenue dans nuxtServerInit, mais d'autres API peuvent l'obtenir pendant le séance, je soupçonnais qu'il y avait quelque chose qui n'allait pas avec Chestnut parce que je n'en trouvais pas la raison. .

Cause

Le dernier problème est dû à ma propre négligence et à la négligence de certains détails Parmi les châtaignes données sur le site officiel :

<.> Il enregistre la session dans req.session, donc la session nuxtServerInit existe dans req.session. Cependant, j'utilise Koa2 et Koa-session analyse le cookie dans ctx.session, qui n'existe pas dans req. session.

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

Solution

Donc lors de l'injection de nuxt.render, ajoutez une session à la requête

Je crois que vous avez lu le cas dans cet article Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

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

Lecture recommandée :

Explication détaillée des étapes pour implémenter une requête floue avec jQuery

Explication détaillée du nœud Async/ Attendez la programmation asynchrone

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!