Введение
Страница фонового управления блога должна иметь систему входа в систему, поэтому рассмотрите возможность аутентификации маршрутизации, и метод реализации такжеNuxtОфициальный сайт дает каштаны на перепрошивку, и, кстати, фронтенд и бекенд маршруты унифицированы.
перехват маршрута
Интерфейс в основном за счет использованияNuxtпромежуточное ПО для перехвата маршрутизации, которое здесь тоже нужноVuexдерево состояния.
middleware
middleware/auth.js
export default function ({ store, redirect }) {
if (!store.state.user) {
return redirect('/login')
}
}
Перенаправьте страницу, проверив, существует ли информация о пользователе в дереве состояний.
layouts/admin.vue
export default {
middleware: 'auth',
components: {
AdminAside
}
}
Добавить промежуточное ПО в макет страницы системы фонового управления
nuxtServerInit
существуетNuxtJsВ процессе рендеринга при вводе запроса первый вызовnuxtServerInitметод, вы можете использовать этот метод для сохранения данных сервера заранее.
Мы можем использовать этот метод для получения сохраненной информации о пользователе.SessionИнформация.
nuxtServerInit ({ commit }, { req, res }) {
if (req.session && req.session.user) {
const { username, password } = req.session.user
const user = {
username,
password
}
commit('SET_USER', user)
}
},
Когда приложение будет завершено, некоторые данные, которые мы получим с сервера, будут помещены в это дерево состояний (хранилище).
согласно сNuxtJsСудя по каштанам, приведенным на официальном сайте, часть страницы аутентификации маршрутизации в основном написана здесь, и следующим шагом будет написание этой части кода на стороне сервера.
Использование Koa и koa-session
Коа и коа-сессия
Внутренний код, который я использую,Koaрамки иkoa-sessionиди прямоSessionсделать обработку.
в новомnuxtнепосредственно выберите проектKoaРамка
vue init nuxt/koa
связанные зависимости
npm install koa-session
Переписать в 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()
дляkoa-sessionДля использования, пожалуйста, обратитесь к:Изучите файлы cookie и сеансы с помощью промежуточного программного обеспечения koa-session.
маршрут входа
// 登录
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: '密码错误'
})
})
На этом весь функциональный процесс в основном завершен, и он очень гладкий, но для меня нет кода, который бы шел гладко.
session is not defined
вопрос
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)
}
}
существуетnuxtServerInitНе могу понятьsessionлюбую информацию, но инуюapiможет быть получен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' })
})
Так и будетsessionсохранено вreq.session, так что вnuxtServerInitсеанс существует вreq.session, пока я используюKoa2 и Koa-сессия,Koa-sessionБудуcookieпроанализированоctx.session, его нет вreq.session.
решить
Итак, вnuxt.renderПри инъекции,sessionдобавить вrequestсередина
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)
})
})
})
Готово!