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

使用vuex商店

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

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 // =>将返回true或false

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

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

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

实际上是在用户登录时，将令牌保存在localStorage中。页面重新加载后，用户将保持登录状态，直到令牌位于localStorage中。

如果仅将令牌放入变量中，则在页面重新加载时，此变量将不再保存令牌。

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

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

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

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

1 个答案: