Vuejs Authentication
routing
midleware
Routing - NuxtJS
Middleware lets you define custom functions that can be run before rendering either a page or a group of pages.
미들웨어는 페이지가 렌더링 되기 전에 실행되야하는 함수를 정의할 수 있도록 해줍니다.
Every middleware should be placed in the middleware/directory. The filename will be the name of the middleware (middleware/auth.js will be the auth middleware).
A middleware receives the context as first argument:
미들웨어는 컨텍스트를 첫번째 인자로 받습니다.
context 란?
The context provides additional objects/params from Nuxt to Vue components and is available in special nuxt lifecycle areas like* asyncData , fetch , plugins , middleware and nuxtServerInit .
컨텍스트는 객체나 매개변수를 넉스트에서 vue components로 전달하고 asyncData, fetch 등과 같은 lifecycle areas에서 사용가능합니다.
In universal mode, middlewares will be called server-side once (on the first request to the Nuxt app or when page refreshes) and client-side when navigating to further routes. In SPA mode, middlewares will be called client-side on the first request and when navigating to further routes.
- universal 모드 : 다른 경로로 이동할 때 미들웨어는 서버사이드(첫번 째 요청이나 page 새로고침하는 경우)와 클라이언트 사이드에서 호출됩니다.
- SPA 모드 : 다른 경로로 이동할 때 미들웨어는 클라이언트 사이드(첫번째 리퀘스트)에서 호출됩니다.
The middleware will be executed in series in this order:
미들웨어는 다음 순서로 순차적으로 실행됩니다.
- nuxt.config.js (in the order within the file)
- Matched layouts
- Matched pages
A middleware can be asynchronous. To do this, simply return a Promise or use the 2nd callback argument:
미들웨어는 비동기입니다.
example
// middleware/stats.js
import axios from ‘axios’
export default function ({ route }) {
return axios.post(‘http://my-stats-api.com’, {
url: route.fullPath
})
}
Then, in your nuxt.config.js , use the router.middleware key:
Then, in your nuxt.config.js , use the router.middleware key:
//nuxt.config.js
export default {
router: {
middleware: ‘stats’
}
}
Now the stats middleware will be called for every route change.
이제 stats midleware는 라우트가 바뀔 때마다 실행됩니다.
You can add your middleware to a specific layout or page as well: pages/index.vue or layouts/default.vue
특정 페이지나 레이아웃에만 미들웨어를 추가할 수 있습니다.
export default {
middleware: ‘stats’
}
API: The middleware Property
참고 : API: The middleware Property - NuxtJS
Named middleware
You can create named middleware by creating a file inside the middleware/ directory, the file name will be the middleware name.
//middleware/authenticated.js
export default function ({ store, redirect }) {
// If the user is not authenticated
if (!store.state.authenticated) {
return redirect(‘/login’)
}
}
//pages/secret.vue
<template>
<h1>Secret page</h1>
</template>
<script>
export default {
middleware: ‘authenticated’
}
</script>
Auth External API : JWT
Auth External API (JWT) - NuxtJS
