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

Cette fois, je vais vous montrer comment utiliser le framework nuxt pour l'authentification de routage et utiliser Koa et Session Notes sur la façon d'utiliser le framework nuxt pour l'authentification de routage et utiliser Koa. et Session

Qu'est-ce que c'est ? Voici des cas réels.

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, Lizi l'a réécrit et a également unifié le routage front-end et back-end.

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. Cette méthode peut être utilisée pour sauvegarder les données du serveur à l'avance.

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 du cookie et de la session à 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 :

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

<.> 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.

Solution

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

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

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 !

Lecture recommandée :

Comment gérer le problème de performances gaspillées async/wait

Mise en œuvre JQuery d'un cas pratique de requête floue analyse

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!