nuxt 프레임워크에서 라우팅 인증을 위해 Koa 및 세션을 사용하는 방법

이번에는 nuxt 프레임워크에서 라우팅 인증을 위한 Koa 및 Session 사용 방법을 알려드리겠습니다. nuxt 프레임워크에서 라우팅 인증을 위한 Koa 및 Session 사용 시

주의 사항

은 무엇입니까? . 소개

블로그의 백엔드 관리 페이지에는 로그인 시스템이 필요하므로 라우팅 인증을 고려해보세요. 구현 방법도 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 메소드가 먼저 호출되는데, 이 메소드를 통해 서버 데이터를 미리 저장할 수 있습니다.

이 방법을 사용하여 사용자 정보가 저장된 세션 정보를 받을 수 있습니다.

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

백엔드 코드로는 Koa 프레임워크와 koa-session을 사용하여 Session을 처리합니다.

새 nuxt 프로젝트를 생성할 때 Koa 프레임워크를 직접 사용할 수 있습니다.

vue init nuxt/koa

관련 종속성

npm install koa-session

Rewrite in 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 사용법은 다음을 참조하세요: Learn cookie 및 from koa- session middleware sessionLogin 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: '密码错误'
 })
})

여기에 작성하면 전체 기능 프로세스가 기본적으로 완료되고 매우 원활하지만 저에게는 원활한 항해 코드가 없습니다.

session이 정의되지 않았습니다

Problem

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에서는 세션에 대한 정보를 얻을 수 없지만 다른 API에서는 세션을 얻을 수 있습니다. 당시에는 이유를 찾을 수 없었기 때문에 문제가 있다고 의심했습니다. 릴리와 함께. .

이유

마지막 문제는 여전히 내 부주의와 일부 세부 사항 무시로 인해 발생합니다. 공식 웹사이트에서 제공한 내용은 다음과 같습니다.

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' })
})

세션을 req.session에 저장하므로 nuxtServerInit 세션이 존재합니다. req.session에서 Koa2와 Koa-session을 사용합니다. Koa-session은 req.session에 존재하지 않는 ctx.session으로 쿠키를 구문 분석합니다.

솔루션

그러므로 nuxt.render를 삽입할 때 요청에 세션을 추가하세요

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)
   })
  })
 })

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 다음의 다른 관련 기사를 주목하세요. PHP 중국어 웹사이트!

추천 자료:
jQuery를 사용하여 퍼지 쿼리를 구현하는 단계에 대한 자세한 설명

node Async/Await 비동기 프로그래밍 구현에 대한 자세한 설명

🎜🎜

위 내용은 nuxt 프레임워크에서 라우팅 인증을 위해 Koa 및 세션을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!