Как отобразить / скрыть панель навигацииactstrap в приложении Reactjs Redux? - PullRequest
Новая
       29

Как отобразить / скрыть панель навигацииactstrap в приложении Reactjs Redux?

0 голосов
/ 15 мая 2018

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

Пожалуйста, найдите компонент заголовка: /components/app-header.js

const AppHeader = () => (
    <Navbar color="light" light expand="md">
        <NavbarBrand href="/">TestBrand</NavbarBrand>
        <Nav navbar>
            <NavItem>
                <Link className="lnk" to='/users'>Users</Link>
            </NavItem>            
        </Nav>
        <Nav className="ml-auto" navbar>
            <NavItem>
                <Link className="lnk" to='/logout'>Logout</Link>
            </NavItem>
        </Nav>
    </Navbar>
)

Файл, который обрабатывает все маршруты, показан ниже (route / index.js): 

import React from 'react';
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';
import { AppHeader } from '../components';

export default () => (
    <BrowserRouter>
        <div>
            {
                localStorage.getItem('access-token') &&
                <div>
                    <AppHeader />
                </div>
            }
            <Switch>
                <Route exact path="/users" component={Users} />
                <Route exact path="/users/add" component={Users} />
                <Route exact path="/users/:id" component={Users} />
            </Switch>
        </div>
    </BrowserRouter>
)

Основное приложение просто содержит следующий код: 

import React, { Component } from 'react';
import Routes from '../routes';
import '../style.css';

class App extends Component {

    render() {
        return (
            <div>
                <Routes />
            </div>
        )
    }
}

export default App;

Я не хочу обновлять страницу, так как она противоречит самой цели SPA. Как мне этого добиться?

1 Ответ

0 голосов
/ 15 мая 2018

Сделать маршруты компонентом с состоянием. 

import React from 'react';
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';
import { AppHeader } from '../components';

class Routes {
   this.state = {loggedIn: false}
   componentDidMount() {
     if(localStorage.getItem('access-token')) {
        this.setState({loggedIn: true})
     }
     //attach an event listener to the window object for storage event. 
     $(window).on('storage',() => {
        if(localStorage.getItem('access-token')) {
          this.setState({loggedIn: true})
        }
     });
   } 
   render() {
     return (
      <BrowserRouter>
        <div>
            {
                this.state.loggedIn &&
                <div>
                    <AppHeader />
                </div>
            }
            <Switch>
                <Route exact path="/users" component={Users} />
                <Route exact path="/users/add" component={Users} />
                <Route exact path="/users/:id" component={Users} />
            </Switch>
        </div>
    </BrowserRouter>)
   }
}
export default Routes;

После того, как компонент смонтирован, вы слушаете обновления localStorage.если локальное хранилище изменено, оно обновит состояние компонента по мере необходимости.

...