From b4448292e67f7348ebf60f723af495f9b240cccb Mon Sep 17 00:00:00 2001
From: aborn <loveaborn@foxmail.com>
Date: Mon, 27 Feb 2023 17:50:43 +0800
Subject: [PATCH] feat: middleware example.

---
 playground/middleware/auth.ts |  7 +++++++
 playground/pages/secure.vue   |  7 +++----
 src/runtime/plugin.ts         | 15 +++++++--------
 3 files changed, 17 insertions(+), 12 deletions(-)
 create mode 100644 playground/middleware/auth.ts

diff --git a/playground/middleware/auth.ts b/playground/middleware/auth.ts
new file mode 100644
index 0000000..526d396
--- /dev/null
+++ 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
index 0ad0d95..91912a8 100644
--- 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
index 2525f67..81d0a51 100644
--- 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,7 +93,7 @@ class Oidc {
     }
   }
 
-  login (redirect = '/') {
+  login(redirect = '/') {
     if (process.client) {
       const params = new URLSearchParams({ redirect })
       const toStr = '/oidc/login?' + params.toString()
@@ -101,7 +101,7 @@ class Oidc {
     }
   }
 
-  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.
 })