Vue.js Как использовать localstorage в одном компоненте файла vue

Question

Я новичок в Vue.js, и мне нужно знать, как использовать localalstorage на странице входа.И после того, как я успешно вошел на страницу приветствия, если я вручную изменил URL-адрес с «/ welcome» на «/ login», он перенаправляется обратно на страницу входа, потому что я не использую локальное хранилище.Как решить эту проблему с помощью localalstorage.

Вот код:

methods: {
        login() {
            if (this.input.username != '' && this.input.password != '') {

                this.$http.post('http://www.example.com/test', {
                        name: this.input.username,
                        password: this.input.password
                    })
                    .then((response) => {
                        this.items = response.data;
                        if (this.items == 'You are authorised')
                            this.$router.push('/welcome')
                    })
            }
        },
        mounted() {

            this.login()

        }

Answer 1

Вы можете использовать localStorage , как если бы вы не использовали Vue.

Я бы удалил вызов this.login() в вашем методе mounted, см. Vueжизненный цикл для лучшего понимания created, mounted и других хуков выполнения в Vue.Учитывая это, ваш login метод, вероятно, должен вызываться при отправке формы.

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

Давайте сначала добавим флаг, чтобы указать поддержку или нет.

data () {
    return {
        localStorageSupport: true
    }
}

Предположим, что поддержка есть, а затем проведем тест на create, где мы изменим его, если на самом деле нет 't.

created () {
    try {
        window.localStorage.setItem('the-test-item-name', 'hello-test');
        window.localStorage.removeItem('the-test-item-name');
    } catch (e) {
        console.error('Local storage not supported')
        this.localStorageSupport = false;
    }
}

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

Теперь, в методе created вы уже можете видетькак установить setItem(name, content) и удалить removeItem(name) элемент, чтобы получить элемент, это просто getItem(name).

Итак, когда вы получите ответ от $http.post, вам нужно будет setItem, чтобы сохранить значение, указывающее, вошел ли пользователь в систему, и вам нужно будет проверить это значение, используя getItem на маршрутах, которые должны быть ограничены.

.then((response) => {
    this.items = response.data;
    if (this.items == 'You are authorised') {
        // remember, you can check our flag this.localStorageSupport to use a fallback method here
        localStorage.setItem('logged-in', true)
        this.$router.push('/welcome')
    }
})