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 } }
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 nuxtvue init nuxt/koa
npm install koa-session
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()
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: '密码错误' }) })
la session n'est pas définie
ProblèmenuxtServerInit ({ 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) } }
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' }) })
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 jQueryExplication détaillée du nœud Async/ Attendez la programmation asynchroneCe 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!