집 > 기사 > 웹 프론트엔드 > 라우팅 인증을 위한 nuxt 프레임워크 운영 및 Koa 및 Session 사용 방법

라우팅 인증을 위한 nuxt 프레임워크 운영 및 Koa 및 Session 사용 방법

php中世界最好的语言원래의: 2018-05-30 15:09:412828검색

이번에는 라우팅 인증을 위한 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 session

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: '密码错误'
 })
})

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

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 중국어 웹사이트!