Question

我有一个使用auth0的spa策略对用户进行身份验证的应用程序。只要我可以连接互联网，身份验证就会一直存在，因为当用户isAuthenticated()访问需要身份验证的页面时，我可以检查该用户是否router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !auth.isAuthenticated()) { auth.renewTokens() .then(() => { if (!auth.isAuthenticated()) { next({ name: 'Index' }) } else { next() } }) .catch(() => next({ name: 'Index' })) } else { next() } })。如果他没有通过身份验证，我会尝试更新令牌，只要他之前的令牌没有过期，该令牌就可以工作，并且我可以将他重定向到所需的页面。如果无法更新令牌，请让用户再次登录。因此，这非常适合用户在线时使用。但是，由于我也想使其像pwa一样工作，通常意味着我希望用户在脱机时也能够使用该应用程序，所以我努力寻找一种策略来实现这一目标。

如果我想添加该脱机功能，您对使用哪种策略有任何建议？我认为一种方法是将到期日期再添加idtoken到本地存储，然后根据用户是否具有idtoken以及令牌是否过期来决定是否登录，但是据我所知不好的做法，所以我宁愿避免这种情况。

我正在使用vue和vue-router，并在每次访问经过身份验证的路由之前检查用户是否经过了以下身份验证：

import auth0 from 'auth0-js'
import EventEmitter from 'events'
import authConfig from './authConfig.json'

const webAuth = new auth0.WebAuth({
  domain: authConfig.domain,
  redirectUri: `${window.location.origin}/callback`,
  clientID: authConfig.clientId,
  responseType: 'id_token',
  scope: 'openid profile email'
})

const localStorageKey = 'loggedIn'
const loginEvent = 'loginEvent'

class AuthService extends EventEmitter {
  idToken = null;
  profile = null;
  tokenExpiry = null;

  // Starts the user login flow
  login (customState) {
    webAuth.authorize({
      appState: customState
    })
  }

  // Handles the callback request from Auth0
  handleAuthentication () {
    return new Promise((resolve, reject) => {
      webAuth.parseHash((err, authResult) => {
        if (err) {
          reject(err)
        } else {
          this.localLogin(authResult)
          resolve(authResult.idToken)
        }
      })
    })
  }

  localLogin (authResult) {
    this.idToken = authResult.idToken
    this.profile = authResult.idTokenPayload

    // Convert the JWT expiry time from seconds to milliseconds
    this.tokenExpiry = new Date(this.profile.exp * 1000)

    localStorage.setItem(localStorageKey, 'true')

    this.emit(loginEvent, {
      loggedIn: true,
      profile: authResult.idTokenPayload,
      state: authResult.appState || {}
    })
  }

  renewTokens () {
    return new Promise((resolve, reject) => {
      if (localStorage.getItem(localStorageKey) !== 'true') {
        return reject(new Error('Not logged in'))
      }

      webAuth.checkSession({}, (err, authResult) => {
        if (err) {
          reject(err)
        } else {
          this.localLogin(authResult)
          resolve(authResult)
        }
      })
    })
  }

  logout () {
    localStorage.removeItem(localStorageKey)

    this.idToken = null
    this.tokenExpiry = null
    this.profile = null

    webAuth.logout({
      returnTo: window.location.origin
    })

    this.emit(loginEvent, { loggedIn: false })
  }

  isAuthenticated () {
    return (
      Date.now() < this.tokenExpiry &&
      localStorage.getItem(localStorageKey) === 'true'
    )
  }
}

export default new AuthService()

这是我当前的authService.js代码：

{{1}}

如何通过重启pwa来保持pwa中的身份验证？

0 个答案: