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.jsexport default function ({ store, redirect }) { if (!store.state.user) { return redirect('/login') } }
export default { middleware: 'auth', components: { AdminAside } }
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) } },
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' }) })
Solution
Donc lors de l'injection de nuxt.render, ajoutez une session à la requêteapp.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) }) }) })
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!