Как мне реорганизовать этот код Vue Js, чтобы избежать использования локального хранилища? - PullRequest
Новая
       13

Как мне реорганизовать этот код Vue Js, чтобы избежать использования локального хранилища?

0 голосов
/ 23 октября 2018

У меня есть код, который обрабатывает аутентификацию для приложения 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
}
}

1 Ответ

0 голосов
/ 23 октября 2018

Использование vuex store

Получив токен из конечной точки, вы можете сохранить его в локальном хранилище: 

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 // => willверните true или false

Вы можете следовать той же логике для токена доступа и срок действия которого истекает.

Обновление: Приложения SPA могут обрабатывать все без необходимости обновления.Но после перезагрузки (вручную) переменные не будут сохранять свое собственное состояние.

Вот почему вы используете локальное хранилище, поэтому даже если страница перезагружается, токен сохраняется в локальном хранилище, и вы можете получить его.

Практически, когда пользователь входит в систему, вы сохраняете токен в localStorage. Когда страница перезагружается, пользователь остается в журнале, пока токен не окажется в localStorage.

Если вы просто поместите токен в переменную,если страница перезагружается, эта переменная больше не будет содержать токен.

Если вам не нравится localStorage, в качестве решения вы можете отправить запрос на вход в систему всякий раз, когда страница перезагружается, что не рекомендуется.

Хочу отметить, что вы также можете использовать куки.

Надеюсь, мой ответ помог вам.

...