Почему эта проверка разрешения частного маршрута не работает в React?

Question

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

Выглядело это так

import { Route } from "react-router-dom";
import React from "react";
import { Redirect } from "react-router";

export default ({
  component: Component,
  render: renderFn,
  authed,
  name,
  ...rest
}) => {
  //The privateroute is fed with the auth state of app.js and evaluates the render based on that . If flase always renders "/"
  if (Component) {
    return (
      <Route
        {...rest}
        render={props =>
          authed === true ? (
            <Component {...props} />
          ) : (
            <Redirect
              to={{ pathname: "/login", state: { from: props.location } }}
            />
          )
        }
      />
    );
  } else {
    return (
      //Second case is for iframe based renders
      <Route
        {...rest}
        render={props =>
          authed === true ? (
            renderFn(props)
          ) : (
            <Redirect
              to={{ pathname: "/login", state: { from: props.location } }}
            />
          )
        }
      />
    );
  }
};

Теперь дело в том, что я решил внедрить систему разрешений. Мой список разрешений исходит от повара ie, который содержит jwt, поэтому я использую следующий код:

import { Route } from "react-router-dom";
import React from "react";
import { Redirect } from "react-router";
import Cookies from "js-cookie";
var jwtDecode = require("jwt-decode");
export default ({
  component: Component,
  render: renderFn,
  authed,
  name,
  ...rest
}) => {
  var accesstoken = Cookies.get("accesstoken");
  var decoded = jwtDecode(accesstoken); //["landingpage","registerpage"]
  console.log("accesstoken  inside the private route: ");
  console.log(decoded.permited); //["landingpage","registerpage"] --> those are the only routes permited for the current user
  console.log(name); //name of the component being accessed --> "heimdall"
  console.log(
    "is the name of the component being accessed included in the decoded jwt?"
  );
  console.log(decoded.permited.includes(name)); //false -> should return the "false" action, redirect to login

  //The privateroute is fed with the auth state of app.js and evaluates the render based on that . If flase always renders "/"
  if (Component) {
    return (
      <Route
        {...rest}
        render={props =>
          authed === true && this.decoded.permited.includes(name) === true ? ( //the second check after && is not working , it should equal to "true && false == false" , but it returns true
            <Component {...props} />
          ) : (
            <Redirect
              to={{ pathname: "/login", state: { from: props.location } }}
            />
          )
        }
      />
    );
  } else {
    return (
      //Second case is for iframe based renders
      <Route
        {...rest}
        render={props =>
          authed === true ? (
            renderFn(props)
          ) : (
            <Redirect
              to={{ pathname: "/login", state: { from: props.location } }}
            />
          )
        }
      />
    );
  }
};

Но, похоже, он не работает, как указано в моем коде. Строки над основным if все возвращают то, что ожидали. Но затем во время проверки, по-видимому, «true && (что должно быть) false» возвращает true, поэтому проверка никогда не дает сбой, как и должно быть.

Что происходит?

РЕДАКТИРОВАТЬ: Я выяснил, что код и всегда возвращал, и я не знал об этом. Я отлаживаю это прямо сейчас

Answer 1

Это была ошибка в моем коде. Мне пришлось переместить логи c условия if в другое.