Навбар, который не принимает токен - PullRequest
Новая
       16

Навбар, который не принимает токен

0 голосов
/ 04 февраля 2020

У меня есть небольшая проблема с навигационной панелью, которая не принимает токен, проблема на моем сайте, есть навигационная панель, когда вы не зарегистрированы, и одна, когда вы, проблема, когда пользователь это логин / регистрация, это вернулся на домашнюю страницу (это очень хорошо), но навигационная панель не меняется

Вот код моего приложения. js, моя регистрация jsx и Navabr jsx:

Приложение. js

js import React from "react";
import { withRouter, Route, Switch } from "react-router-dom";
import NavBar from "./Components/NavBar/NavBar";
import Home from "./Components/HomePage/Home";
...
import Inscription from "./Components/Form/Inscription";

function App({ location }) {
  return (
    <div className="App">
      <NavBar />
      <section className="route-section">
        <Switch location={location} key={location}>
          <Route exact path="/" component={Home} />
          <Route path="/FAQ" component={FAQ} />
          <Route path="/Connexion" component={Connexion} />
          <Route path="/Inscription" component={Inscription} />
          <Route component={NotFound} />
        </Switch>
      </section>
      <Footer />
    </div>
  );
}
export default withRouter(App); 


import React from "react";
import { Button, Form, FormGroup, Label, Input } from "reactstrap";
import { Link } from "react-router-dom";
import axios from "axios";
import "../../Styles/Connexion.css";

class Connexion extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      signInEmail: "",
      signInPassword: "",
      signInID: "",
      signInError: ""
    };
  }

  handleChange = event => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  signIn = event => {
    event.preventDefault();
    const token = localStorage.getItem("token");
    let { signInEmail, signInPassword } = this.state;
    axios
      .post(
        "http://localhost:5000/api/connexion",
        { email: signInEmail, password: signInPassword },
        {
          headers: {
            Authorization: `Bearer ${token}`
          }
        }
      )
      .then(({ data }) => {
        this.setState({
          login: {
            signInEmail: data.email,
            signInPassword: data.password,
            signInId: data.id
          }
        });
        const { history } = this.props;
        localStorage.setItem("user", JSON.stringify(data));
        history.push("/");
      });
  }; ```


import React from "react";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink
} from "reactstrap";

class NavBarWild extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      navBarSwitch: false
    };
    this.toggle = this.toggle.bind(this);
    console.log(this.state.navBarSwitch);
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  toggleSign = () => {
    const token = localStorage.getItem("token");
    const navBarSwitch = this.state.navBarSwitch;
    this.setState({
      navBarSwitch: navBarSwitch ? false : true
    });
    console.log(token);
  };
render() {
    const navBarSwitch = this.state.navBarSwitch;
    if (!navBarSwitch) {
      return (
        <div>
          <Navbar color="light" light expand="md">
            <NavbarBrand href="/">
              <img alt="Logo" src="https://i.postimg.cc/JzMM2v9K/logo192.png" />
            </NavbarBrand>
            <NavbarToggler onClick={this.toggle} />
            <Collapse isOpen={this.state.isOpen} navbar>
              <Nav className="ml-auto" navbar>
                <NavItem>
                  <NavLink href="/FAQ">FAQ</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink href="/Contact">Nous contacter</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink href="/Connexion">Connexion</NavLink>
                </NavItem>
              </Nav>
            </Collapse>
          </Navbar>
        </div>
      );
    } else {
      return (
        <div>
          <Navbar color="light" light expand="md">
            <NavbarBrand href="/">
              <img alt="Logo" src="https://i.postimg.cc/JzMM2v9K/logo192.png" />
            </NavbarBrand>
            <NavbarToggler onClick={this.toggle} />
            <Collapse isOpen={this.state.isOpen} navbar>
              <Nav className="ml-auto" navbar>
                <NavItem>
                  <NavLink href="/Concert">Concert</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink href="/Favori">FAV</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink href="/FAQ">FAQ</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink href="/Contact">Nous contacter</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink href="/Connexion">Déconnexion</NavLink>
                </NavItem>
              </Nav>
            </Collapse>
          </Navbar>
        </div>
      );
    }
  }
}
export default NavBarWild;

Я не знаю, является ли это мое приложение. js отсутствует на панели навигации из-за маршрутизаторов или просто из-за ошибки при отправке токена.

...