Как посмотреть, если токен будет зарегистрирован в localStorage, и соответственно изменить значение связанного свойства?

Question

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

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

Почему это происходит?

<template>
    <div class="nav-header">
        <div class="wrapper">
            <ul class='nav-ul'>
                <router-link to="/" tag='li' active-class='active' exact><li><a>Home</a></li></router-link>
                <router-link to="/signup" v-if="!isLoggedIn" tag='li' active-class='active' exact><li><a>Sign Up</a></li></router-link>
                <router-link to="/signin" v-if="!isLoggedIn" tag='li' active-class='active' exact><li><a>Sign In</a></li></router-link>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        computed: {
            isLoggedIn() {
                return !!window.localStorage.getItem('token')
            }
        }
    }
</script>

App.vue

<template>
    <div id="app">
        <app-header></app-header>
        <router-view></router-view>
    </div>
</template>

<script>
    import Header from './components/header.vue';
    export default {
        components: {
            appHeader: Header
        }
    }
</script>

Sigin.vue

<template>
    <div>
        <input v-model="email" placeholder="Your Email...">
        <input v-model="password" placeholder="Your Password...">
        <button v-on:click.prevent="signin" type="submit" name="submit">Submit</button>
    </div>
</template>

<script>
    import axios from 'axios'
    axios.defaults.baseURL = 'http://94.155.24.68/api';

    export default {
        data: function() {
            return {
                email: '',
                password: ''
            }
        },
        methods: {
            signin: function(){
                axios.post('/signin', {
                    email: this.email,
                    password: this.password
                })
                .then((response) => {
                    console.log(response);
                    const token = response.data.token;
                    localStorage.setItem('token', token);
                }).catch((error) => console.log(error));
            }
        }
    }
</script>

Answer 1

Причина, по которой это не работает, заключается в том, что вы пытаетесь отслеживать изменения в нереактивном localStorage.

Чтобы сделать его реактивным, я стремлюсь создать глобальный экземпляр Vue, используя Vue.prototype (позволяющий использовать его во всех ваших компонентах)

Vue.prototype.$localStorage = new Vue({
    data: { 
       // token property returning the ls token value 
       token: window.localStorage.getItem('token') 
    },
    watch:{ 
       // watcher listening for changes on the token property
       // to ensure the new value is written back to ls 
       token(value){ window.localStorage.setItem('token', value) } 
    }
})

//  you can now access the token in all your components using
//  this.$localStorage.token            get the token value
//  this.$localStorage.token = 'tkn';   set the token value  

Демо https://codepen.io/jakob-e/pen/LMJEYV?editors=1010

Чтобы реализовать его в своем решении, вы можете сделать:

// in the header component
computed: {
  isLoggedIn(){ return this.$localStorage.token !== ''; }
}

// in the signin component
signin(){
  axios.post('/signin', {
    email: this.email,
    password: this.password
  })
  .then((response) => {
    console.log(response);
    const token = response.data.token;
    this.$localStorage.token = token;  
  })
  .catch((error) => console.log(error));
}