How can I manage security in my rails API interop application?

I've been looking for answers all day and I couldn't find anything to help me.

I am currently working on a framework developed in React and Rails API. My Rails API uses a token to handle security and authentication ( https://github.com/lynndylanhurley/devise_token_auth ). I am not using React-Redux.

The React frontend has public pages (like login) and private pages where login (valid access token) is required.

I store the access token, uid and client in the session store (these 3 parameters come from the login response) and the access token is sent in the header of every request.

Here's what I thought:

• Once the user is logged in, store the response in the session store as well as a javascript object. This object will be there unless the user refreshes the page, closes or opens it.
• Every time the user navigates to the private page, before reacting the router returns a component, I check to see if my LoggedInUser JavaScript object has something. If it doesn't have anything, I'll call the endpoint "validate_token" the content of the session content, because that means it is the returning user. If it is valid, save it in a javascript object called "LoggedInUser". If not, go to the login page.
• If I don't have anything on my LoggedInUser object or session store, I am redirected to login.

My questions:

• How can I make my personal pages secure if we're always talking about javascript variables and ajax calls (client side)? An unauthorized user can debug my javascript file, create content in the "LoggedInUser" object, and view my personal pages. Human won't be able to see any content because all invalid token requests will return 401, but they will still be able to see my HTML or static files and existing API requests.

Many thanks!