asteroid.userId gives inconsistent returns

[Falieson]

Hello, Notice the line Users.methods.usAuthed() and you can see that its calling !!asteroid.userId . My login form works fine, but I'm trying to make a react-router authorization wall which means the router will load the component when the authorization check returns true.

I've investigated further and Users.methods.usAuthed() returns false after passing a 404 url matching this guide: https://reacttraining.com/react-router/web/example/no-match

/src/components/PrivatePage.tsx

// almost identical to ./PrivateRoute.tsx

import * as React from 'react'
import { Redirect, Route } from 'react-router-dom'
import User from '../data/users'
import Page from './Page'

const PrivatePage = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    User.methods.isAuthed() ? (  **// after page 'notFound' this returns false**
      <Page>
        <Component {...props}/>
      </Page>
    ) : (
      <Redirect to={{
        pathname: '/redirect',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

export default PrivatePage

/src/data/users.tsx

import asteroid from '../asteroid/'

interface IUsers {
  methods: {
    isAuthed: () => boolean
  }
}

const Users: IUsers = {
  methods: {
    isAuthed() {
      const result = !!asteroid.userId
      console.log({isAuthed: result})
      return result
    }
  }
}

export default Users

/routes/App.tsx

import * as React from 'react'
import { Route, Switch } from 'react-router-dom'

import PrivatePage from '../components/PrivatePage'
import Login from './accounts/auth/'
import About from './root/About'
import Home from './root/Home'
import NotAuthorized from './root/NotAuthorized'
import NotFound from './root/NotFound'

interface IProps {}
interface IState {
  isAuthorized: boolean
}

class App extends React.Component<IProps, IState> {
  render() {
    const Content = () => (
      <div id='app-content'>
        <Switch>
          <Route path='/login' component={Login}/>
          <Route path='/redirect' component={NotAuthorized}/>
          <PrivatePage 
            path='/'
            component={Home}
            exact={true}
          />
          <PrivatePage 
            path='/about'
            component={About}
          />
          <PrivatePage component={NotFound}/>
        </Switch>        
      </div>
    )

    return (
      <div id='app-container'>
        <Content />
      </div>
    )
  }
}

export default App

Posted to SO: https://stackoverflow.com/questions/45738542/react-router-nomatch-causes-asteroid-userid-to-return-falsey

[Falieson]

I think that this is because the express server hiccups b/c universal routing isn't setup.