在vuejs中管理会话信息

Question

我正在使用Vue.js创建一个应用程序，目前正在处理登录/注销功能。基本上我在导航栏中有一个按钮，当用户未登录时应该说登录，当用户会话处于活动状态时注销。用户会话信息存储在浏览器sessionStorage中，所以基本上我的问题是，处理组件之间通信的最佳方法是什么？

这是我的主要组件，它有一个名为“currentUser”的变量，它将作为prop传递给子组件以供进一步使用。

<template>  
    <div id="application">
        <div id="navbar">
            <navbar :current-user.sync="currentUser"></navbar>
        </div>
            <router-view :current-user.sync="currentUser"></router-view>
    </div>
</template>

<script>
    var nav = require('./src/components/navbar.vue');
    module.exports = {
        components: {
            'navbar': nav
        },
        ready: function(){
            this.currentUser = {
                userId: window.sessionStorage.getItem('userId'),
                username: window.sessionStorage.getItem('user'),
                scope: window.sessionStorage.getItem('scope')
            }
        },
        data: function(){
            return {
                currentUser: {
                    userId: '',
                    username: '',
                    scope: ''
                }
            }
        }
    }
</script>

然后我们有一个导航栏组件，它将根据用户权限显示/显示链接

<template>
    <nav>
        <div class="nav-wrapper blue darken-4">
            <a href="#" class="brand-logo logo">DINAF</a>
            <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li>
                    <a v-link="'/organization/map'">Mapa de organizaciones</a>
                </li>
                <li>
                    <a v-link="'/'">Listar organizaciones</a>
                </li>
                <li >
                    <a  v-link="{path: '/organization/new'}">Agregar organización</a>
                </li>
                <li  v-if="!isLoggedIn">
                    <a v-link="{path: '/login'}">Login</a>
                </li>
                <li v-else>
                    <span>Welcome {{currentUser.scope}} </span><a v-on:click="logout()" class="waves-effect waves-light btn blue darken-1">Logout</a>
                </li>
            </ul>
        </div>
    </nav>
</template>

<script>
    var Vue = require('vue'); 
    var config = require('../../config.js');
    module.exports = {
        name: 'navbar',
        props: ['currentUser'],
        ready: function(){
            this.isLoggedIn = this.currentUser.scope != ''
            console.log(this.isLoggedIn)
        },
        methods: {
            logout: function(){
                this.$http.get(config.baseUrl() + '/v1/logout').then(function(response){
                    window.sessionStorage.removeItem('user');
                    window.sessionStorage.removeItem('userId');
                    window.sessionStorage.removeItem('scope');
                    this.currentUser = {
                                            userId: '',
                                            username: '',
                                            scope: ''
                                        }
                    this.$route.router.go('/');   
                },function(error){
                    console.log(error);
                })
            }
        },
        data: function(){
            return {
                isLoggedIn: false,
            }
        }
    };
</script>

登录的登录组件并将信息保存到本地存储

<template >  
    <div class="loginContainer">  
        <div class="row">
            <div class="col s6 offset-s3 ">
                <div class="card blue-grey darken-2 white-text">
                    <div class="card-content">
                        <div class="row">
                            <div class="input-field col s12">
                                <i class="material-icons prefix">email</i>
                                <input id="username" type="text" v-model="user.username" data-error="Ingrese su nombre de usuario" class="validate">
                                <label for="username">Username</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <i class="material-icons prefix">lock</i>
                                <input id="password" type="password" v-model="user.password" class="validate">
                                <label for="password"><i class="fa fa-lock" aria-hidden="true"></i> Contraseña</label>
                            </div>
                        </div>
                    </div>
                    <div class="card-action">
                        <a type="submit" id="loginButton" class="waves-effect waves-light btn blue-grey darken-4" v-on:click="logIn">Iniciar Sesión</a>
                    </div>
                </div>
            </div>
        </div>
     </div>
</template>
<script>
    var swal = require('sweetalert');
    var config = require('../../config.js');

    module.exports = {
        name: 'login',
        props: ['currentUser'],
        methods: {  
            logIn: function(){
                this.$http.post(config.baseUrl() + '/v1/login', this.user).then(function(response){

                    this.currentUser = {
                        username: response.json().user,
                        userId: response.json()._id,
                        scope:  response.json().scope
                    }
                    window.sessionStorage.setItem('user', this.currentUser.username);
                    window.sessionStorage.setItem('userId', this.currentUser.userId);
                    window.sessionStorage.setItem('scope', this.currentUser.scope);
                    console.log(this.currentUser)
                    this.$route.router.go('/');
                },function(error){
                    swal('Error', 'Usuario o password incorrecto', 'error');
                });

            }
        },
        data: function(){
            return {
                user: {},
            }
        }
    }
</script>

我现在遇到的问题是，当您登录时，会更新sessionStorage，但不会更新导航栏组件上的数据，因此导航栏中的登录永远不会更改。