Как скрыть элемент навигации маршрута входа в систему после того, как пользователь вошел в систему с помощью токен-аутентификации? - PullRequest
Новая
       9

Как скрыть элемент навигации маршрута входа в систему после того, как пользователь вошел в систему с помощью токен-аутентификации?

0 голосов
/ 09 января 2019

При входе в систему я сохраняю токен в локальном хранилище, используя localStorage.setItem('token', token);, но теперь я хотел бы скрыть элементы навигации, которые ведут к маршрутам входа и регистрации. Вот мои маршруты: 

<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" tag='li' active-class='active' exact><li><a>Sign Up</a></li></router-link>
                <router-link to="/signin" tag='li' active-class='active' exact><li><a>Sign In</a></li></router-link>
            </ul>
        </div>
    </div>
</template>

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

1 Ответ

0 голосов
/ 09 января 2019

Вы можете определить свойство computed в своем компоненте, например, isLoggedIn, которое возвращает значение boolean. 

computed: {
  isLoggedIn() {
    return !!window.localStorage.getItem('token')
  }
}

Затем вы можете использовать директиву v-if в маршрутах, которые хотите скрыть. 

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