Maison > interface Web > js tutoriel > le corps du texte

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

php中世界最好的语言
Libérer: 2018-05-22 14:06:01
original
1897 Les gens l'ont consulté

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')
 }
}
Copier après la connexion

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
  }
 }
Copier après la connexion

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)
  }
 },
Copier après la connexion

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
Copier après la connexion
Dépendances pertinentes

npm install koa-session
Copier après la connexion
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()
Copier après la connexion
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: '密码错误'
 })
})
Copier après la connexion
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)
  }
 }
Copier après la connexion
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' })
})
Copier après la connexion

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)
   })
  })
 })
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal