如何重构此 Vue Js 代码以避免使用本地存储？

Question

我有一个处理 Vue.js 和 Auth0 应用程序身份验证的代码。它在本地存储中存储和检索值。如何更改此代码以直接访问值expiresAt、idToken、accessToken 和user，而不是使用本地存储？

import auth0 from 'auth0-js'
import Vue from 'vue'

let webAuth = new auth0.WebAuth({
domain: 'your_auth0_domain',
clientID: 'your_auth0_client',

redirectUri: 'http://localhost:8080/callback',

audience: 'https://' + 'your_auth0_domain' + '/api/v2/',
responseType: 'token id_token',
scope: 'openid profile' // define the scopes you want to use
})

let auth = new Vue({
computed: {
    token: {
        get: function () {
            return localStorage.getItem('id_token')
        },
        set: function (id_token) {
            localStorage.setItem('id_token', id_token)
        }
    },
    accessToken: {
        get: function () {
            return localStorage.getItem('access_token')
        },
        set: function (accessToken) {
            localStorage.setItem('access_token', accessToken)
        }
    },
    expiresAt: {
        get: function () {
            return localStorage.getItem('expires_at')
        },
        set: function (expiresIn) {
            let expiresAt = JSON.stringify(expiresIn * 1000 + new Date().getTime())
            localStorage.setItem('expires_at', expiresAt)
        }
    },
    user: {
        get: function () {
            return JSON.parse(localStorage.getItem('user'))
        },
        set: function (user) {
            localStorage.setItem('user', JSON.stringify(user))
        }
    }
},
methods: {
    login() {
        webAuth.authorize()
    },
    logout() {
        return new Promise((resolve, reject) => {
            localStorage.removeItem('access_token')
            localStorage.removeItem('id_token')
            localStorage.removeItem('expires_at')
            localStorage.removeItem('user')
            webAuth.authorize()

        })
    },
    isAuthenticated() {
        return new Date().getTime() < this.expiresAt
    },
    handleAuthentication() {
        return new Promise((resolve, reject) => {
            webAuth.parseHash((err, authResult) => {

                if (authResult && authResult.accessToken && authResult.idToken) {
                    this.expiresAt = authResult.expiresIn
                    this.accessToken = authResult.accessToken
                    this.token = authResult.idToken
                    this.user = authResult.idTokenPayload

                    resolve()


                } else if (err) {
                    this.logout()
                    reject(err)
                }

            })
        })
    }
}
})

export default {
install: function (Vue) {
    Vue.prototype.$auth = auth
}
}

Answer 1

使用vuexstore

从端点获取令牌后，您可以将其存储到本地存储：

api_call_here
.then(response => {
  localStorage.setItem('token', response.body.token)
})

接下来，你的 vuex 存储应该如下所示：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
    isLogged: !!localStorage.getItem('token')
    token: localStorage.getItem('token') || null
}

通过这种方式，您将能够在每个组件中检查用户是否登录：

this.$store.state.isLogged //=> 将返回真或假

您可以对访问令牌遵循相同的逻辑并在以下时间到期。

更新： SPA 应用程序无需刷新即可处理所有事情。但是在（手动）重新加载后，变量将不会保持自己的状态。

这就是您使用本地存储的原因，因此即使页面重新加载，令牌也会保存在本地存储中并且您可以检索它。

实际上，当用户登录时，您将令牌保存在 localStorage.Whenever 页面重新加载，用户保持登录状态，直到令牌在 localStorage 中。

如果您只是将令牌放入变量中，如果页面重新加载，此变量将不再保存令牌。

如果您不喜欢 localStorage，作为解决方案，您可以在页面重新加载时发送登录请求，不建议这样做。

我想提一下，您也可以使用 cookie。

希望我的回答对你有所帮助。