feat: middleware example.

aborn · Feb 27, 2023 · b444829 · b444829
1 parent 39660c1
commit b444829
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/playground/middleware/auth.ts b/playground/middleware/auth.ts
@@ -0,0 +1,7 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+  if (process.server) { return }
+  const { $oidc } = useNuxtApp()
+  if (!$oidc.isLoggedIn) {
+    $oidc.login(to.fullPath)
+  }
+})
diff --git a/playground/pages/secure.vue b/playground/pages/secure.vue
@@ -12,8 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-const { $oidc } = useNuxtApp()
-if (!$oidc.isLoggedIn) {
-  navigateTo('/401')
-}
+definePageMeta({
+  middleware: ['auth']
+})
 </script>
diff --git a/src/runtime/plugin.ts b/src/runtime/plugin.ts
@@ -14,7 +14,7 @@ class Oidc {
   private $useState: any // State: Nuxt.useState (share state in all nuxt pages and components) https://v3.nuxtjs.org/guide/features/state-management
   public $storage: Storage // LocalStorage: Browser.localStorage （share state in all sites, use in page refresh.）
 
-  constructor () {
+  constructor() {
     this.state = { user: {}, isLoggedIn: false }
 
     this.$useState = useState<UseState>('useState', () => { return { user: {}, isLoggedIn: false } })
@@ -29,7 +29,7 @@ class Oidc {
     this.$storage = storage
   }
 
-  get user () {
+  get user() {
     const userInfoState = this.$useState.value.user
     const userInfoLS = this.$storage.getUserInfo()
     if ((isUnset(userInfoState))) {
@@ -42,14 +42,14 @@ class Oidc {
     // return this.state.user  // not auto update
   }
 
-  get isLoggedIn () {
+  get isLoggedIn() {
     const isLoggedIn = this.$useState.value.isLoggedIn
     const isLoggedInLS = this.$storage.isLoggedIn()
     // console.log('isLoggedIn', isLoggedIn, isLoggedInLS)
     return isLoggedIn || isLoggedInLS
   }
 
-  setUser (user: any) {
+  setUser(user: any) {
     this.state.user = user
     this.state.isLoggedIn = Object.keys(user).length > 0
 
@@ -59,7 +59,7 @@ class Oidc {
     this.$storage.setUserInfo(user)
   }
 
-  async fetchUser () {
+  async fetchUser() {
     try {
       if (process.server) {
         // console.log('serve-render: fetchUser from cookie.')
@@ -93,15 +93,15 @@ class Oidc {
     }
   }
 
-  login (redirect = '/') {
+  login(redirect = '/') {
     if (process.client) {
       const params = new URLSearchParams({ redirect })
       const toStr = '/oidc/login?' + params.toString()
       window.location.replace(toStr)
     }
   }
 
-  logout () {
+  logout() {
     // TODO clear user info when accessToken expired.
     if (process.client) {
       this.$useState.value.user = {}
@@ -119,6 +119,5 @@ export default defineNuxtPlugin((nuxtApp) => {
   const oidc = new Oidc()
   nuxtApp.provide('oidc', oidc)
   // console.log('--- Nuxt plugin: DEBUG MODE:' + useNuxtApp().ssrContext?.runtimeConfig.openidConnect.config.debug);
-
   oidc.fetchUser() // render both from server and client.
 })