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

我有一个处理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
}
}

从“auth0 js”导入auth0
从“Vue”导入Vue
设webAuth=new auth0.webAuth({
域：“您的\u auth0\u域”，
clientID:'您的\u auth0\u客户端'，
重定向URI:'http://localhost:8080/callback',
受众：'https://'+'您的\u auth0\u域'+'/api/v2/'，
responseType:“令牌id\u令牌”，
作用域：“openid配置文件”//定义要使用的作用域
})
让auth=newvue({
计算：{
代币：{
get:function（）{
返回localStorage.getItem（'id\u token'）
},
set：函数（id\u令牌）{
setItem（'id\u标记'，id\u标记）
}
},
accessToken：{
get:function（）{
返回localStorage.getItem（'access\u token'）
},
集合：函数（accessToken）{
setItem（'access_token'，accessToken）
}
},
到期日期：{
get:function（）{
返回localStorage.getItem（'expires\u at'）
},
set：函数（expiresIn）{
让expiresAt=JSON.stringify（expiresIn*1000+new Date（）.getTime（））
setItem（'expires_at'，expiresAt）
}
},
用户：{
get:function（）{
返回JSON.parse（localStorage.getItem（'user'））
},
设置：功能（用户）{
localStorage.setItem（'user'，JSON.stringify（user））
}
}
},
方法：{
登录（）{
webAuth.authorize（）
},
注销（）{
返回新承诺（（解决、拒绝）=>{
localStorage.removietem（'access\u token'）
localStorage.removietem（'id\u token'）
localStorage.removeItem（'expires\u at'）
localStorage.removeItem（'用户'）
webAuth.authorize（）
})
},
未经验证（）{
返回新日期（）.getTime（）{
webAuth.parseHash（（错误，authResult）=>{
if（authResult&&authResult.accessToken&&authResult.idToken）{
this.expiresAt=authResult.expiresIn
this.accessToken=authResult.accessToken
this.token=authResult.idToken
this.user=authResult.idTokenPayload
解决（）
}否则如果（错误）{
这是我的。注销（）
拒绝（错误）
}
})
})
}
}
})
导出默认值{
安装：功能（Vue）{
Vue.prototype.$auth=auth
}
}

使用商店

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

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.isloged

/=>将返回true或false

您可以对访问令牌遵循相同的逻辑，并在处过期

更新：SPA应用程序无需刷新即可处理一切。但在重新加载（手动）后，变量将不会保持其自身的状态

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

实际上，当用户登录时，您可以将令牌保存在localStorage中 页面重新加载时，用户将保持日志记录，直到令牌位于本地存储中

如果您只是将令牌放在一个变量中，那么如果页面重新加载，这个变量将不再持有令牌

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

我想说的是，你也可以使用cookies

希望我的回答对你有帮助

使用商店

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

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.isloged

/=>将返回true或false

您可以对访问令牌遵循相同的逻辑，并在处过期

更新：SPA应用程序无需刷新即可处理一切。但在重新加载（手动）后，变量将不会保持其自身的状态

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

实际上，当用户登录时，您可以将令牌保存在localStorage中 页面重新加载时，用户将保持日志记录，直到令牌位于本地存储中

如果您只是将令牌放在一个变量中，那么如果页面重新加载，这个变量将不再持有令牌

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

我想说的是，你也可以使用cookies

---

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

谢谢您的回答。我会调查vuex。然而，你似乎误解了我的问题。我想要实现的是避免完全使用本地存储，直接访问变量。为什么您根本不想使用本地存储？因此，您可以直接将令牌保存在vuex存储中，而无需将其存储在本地存储中。但您必须注意，当页面重新加载时，令牌变量将再次为空。这就是为什么我们使用本地存储来保存令牌，即使页面重新加载我更新了我的答案。检查你是否发现有用的东西。谢谢谢谢这很有帮助。我会考虑你在回答你的回答时提到的选项。我会调查vuex。