Dieses Mal zeige ich Ihnen, wie Sie das Nuxt-Framework für die Routing-Authentifizierung bedienen und Koa verwenden, und Session Hinweise, wie Sie das Nuxt-Framework für die Routing-Authentifizierung bedienen und Koa verwenden und Session
Was sind das? Hier sind tatsächliche Fälle.Einführung
Die Backend-Verwaltungsseite des Blogs benötigt ein Anmeldesystem. Erwägen Sie daher eine Routing-Authentifizierung. Die Implementierungsmethode ist ebenfalls angegeben Die offizielle Nuxt-Website Lizi hat es neu geschrieben und auch das Front-End- und Back-End-Routing vereinheitlicht.Routenabfang
Das Front-End verwendet hauptsächlich die Middleware
von Nuxt, um das Abfangen von Routen durchzuführen Dazu wird der Zustandsbaum verwendet.middleware
middleware/auth.jsexport default function ({ store, redirect }) { if (!store.state.user) { return redirect('/login') } }
layouts/admin.vue
export default { middleware: 'auth', components: { AdminAside } }
Seitenlayout des Hintergrundverwaltungssystems 🎜 >
Wenn im Rendering-Prozess von NuxtJs eine Anfrage eingeht, wird zuerst die nuxtServerInit-Methode aufgerufen. Diese Methode kann verwendet werden, um die Daten des Servers im Voraus zu speichern. Mit dieser Methode können wir Sitzungsinformationen empfangen, in denen Benutzerinformationen gespeichert werden.nuxtServerInit ({ commit }, { req, res }) { if (req.session && req.session.user) { const { username, password } = req.session.user const user = { username, password } commit('SET_USER', user) } },
Koa und Koa-Sitzung verwenden
Koa und Koa-Sitzung
Der Back-End-Code, den ich verwende, ist das Koa-Framework und koa-session zur Verarbeitung der Sitzung. Beim Erstellen eines neuen Nuxt-Projekts können Sie direkt das Koa-Framework auswählenvue 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()
Login-Routing
// 登录 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: '密码错误' }) })
Sitzung ist nicht definiert
ProblemnuxtServerInit ({ 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) } }
Ursache
Das letzte Problem ist auf meine eigene Nachlässigkeit und Vernachlässigung einiger Details zurückzuführen: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' }) })
Lösung
Wenn Sie also nuxt.render injizieren, fügen Sie der Anfrage eine Sitzung hinzuapp.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) }) }) })
Wie man mit dem Problem der Asynchron-/Wartezeitverschwendung umgeht
JQuery-Implementierung von Fuzzy-Abfragen in der Praxis Analyse
Das obige ist der detaillierte Inhalt vonSo bedienen Sie das Nuxt-Framework für die Routing-Authentifizierung und verwenden Koa und Session. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!