fix(frontend):#25 Login state is persisted on refresh (#24)

PhiloBiblon · Jan 16, 2024 · 7251f13 · 7251f13
1 parent e6a48ca
commit 7251f13
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
@@ -166,6 +166,7 @@ export default {
     }
   },
   mounted () {
+    this.$wikibase.$oauth.autoLoginByCookie()
     window.addEventListener('keydown', this.keyDownHandler)
   },
   destroyed () {
@@ -193,6 +194,7 @@ export default {
     logout () {
       this.$store.commit('auth/logout')
       this.$notification.success(this.$i18n.t('auth.logout.success'))
+      this.$cookies.remove('oauth')
     }
   }
 }

diff --git a/frontend/package.json b/frontend/package.json
@@ -16,6 +16,7 @@
     "@nuxtjs/toast": "^3.3.1",
     "cookie-universal-nuxt": "^2.2.2",
     "core-js": "^3.26.1",
+    "jsonwebtoken": "8.5.1",
     "nuxt": "^2.15.8",
     "nuxt-material-design-icons": "^1.0.4",
     "vuetify": "^2.6.12",

diff --git a/frontend/service/oauth.service.js b/frontend/service/oauth.service.js
@@ -1,7 +1,10 @@
+const jwt = require('jsonwebtoken')
+
 export class OAuthService {
-  constructor (store, config) {
+  constructor (store, app) {
     this.$store = store
-    this.$config = config
+    this.$config = app.$config
+    this.$cookies = app.$cookies
   }
 
   step1 () {
@@ -41,10 +44,32 @@ export class OAuthService {
       const accessToken = response.accessToken
       const username = await this.getUsername(accessToken)
       this.$store.commit('auth/login', { username, accessToken })
+      const oauth = {
+        username,
+        accessToken
+      }
+      const signer = 'password'
+      const token = jwt.sign(oauth, signer)
+      this.$cookies.set('oauth', token, {
+        path: '/',
+        maxAge: 60 * 60
+      })
     }
     return response
   }
 
+  autoLoginByCookie () {
+    const token = this.$cookies.get('oauth')
+    try {
+      const decoded = jwt.verify(token, 'password')
+      const username = decoded.username
+      const accessToken = decoded.accessToken
+      this.$store.commit('auth/login', { username, accessToken })
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
   getUsername (accessToken) {
     return fetch(`${this.$config.apiBaseUrl}/api/oauth/username?oauth_token=${accessToken.token}&oauth_tokensecret=${accessToken.tokenSecret}`)
       .then((response) => {

diff --git a/frontend/service/wikibase.service.js b/frontend/service/wikibase.service.js
@@ -23,7 +23,7 @@ export class WikibaseService {
     })
     this.$store = store
     this.$query = new QueryService(store, this.$config)
-    this.$oauth = new OAuthService(store, this.$config)
+    this.$oauth = new OAuthService(store, app)
   }
 
   getWbk () {