Building a Blog With Reactjs And Laravel Part4 Admin

Building a Blog With Reactjs And Laravel Part4: React Admin Panel

In this part of building a simple blog with laravel and react we will focus on building the admin panel pages, and using the reactjs router to move between pages, also we will build the login page to view pages to authorized users only.

 

 

 

Installing React Router

First we need to install some dependencies like the react router, react-router-dom these two components used to setup routing, also i need to install a special npm package called dotenv and this package used to access laravel .env variables.

Next let’s update webpack.mix.js as below:

In the above code i loaded the .env vars using require(‘dotenv’).config(), thereby we can use process.env.<variable> to access any variable in .env.

Let’s open .env and add a new variable called MIX_APP_URL in the bottom of the file this var is the url of the project, i will use it shortly when i use the axios library to do http calls.

.env

Don’t forget to run:

Update resources/js/bootstrap.js like this:

 

Setup Routes

To make the code more clean i will add the routes in a separate component, but let’s first create the admin components for posts, categories, tags, comments, and users.

  • resources/js/admin/components/pages/Dashboard.js
  • resources/js/admin/components/pages/posts/Index.js
  • resources/js/admin/components/pages/posts/Add.js
  • resources/js/admin/components/pages/posts/Edit.js
  • resources/js/admin/components/pages/categories/Index.js
  • resources/js/admin/components/pages/categories/Add.js
  • resources/js/admin/components/pages/categories/Edit.js
  • resources/js/admin/components/pages/tags/Index.js
  • resources/js/admin/components/pages/tags/Add.js
  • resources/js/admin/components/pages/tags/Edit.js
  • resources/js/admin/components/pages/comments/Index.js
  • resources/js/admin/components/pages/users/Index.js
  • resources/js/admin/components/pages/users/Add.js
  • resources/js/admin/components/pages/users/Edit.js

 

resources/js/admin/components/pages/Dashboard.js

resources/js/admin/components/pages/posts/Index.js

resources/js/admin/components/pages/posts/Add.js

resources/js/admin/components/pages/posts/Edit.js

resources/js/admin/components/pages/categories/Index.js

resources/js/admin/components/pages/categories/Add.js

resources/js/admin/components/pages/categories/Edit.js

resources/js/admin/components/pages/tags/Index.js

resources/js/admin/components/pages/tags/Add.js

resources/js/admin/components/pages/tags/Edit.js

resources/js/admin/components/pages/comments/Index.js

resources/js/admin/components/pages/users/Index.js

resources/js/admin/components/pages/users/Add.js

resources/js/admin/components/pages/users/Edit.js

resources/js/admin/components/partials/Breadcrumb.js

Now create resources/js/admin/Routes.js with the following contents:

In the above code i imported Route and Switch from react-router-dom, we use the Route component to set a route to specific component, as we already did for the four components we just created above. As you see the Route takes in a path and component props.

script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”>

Now let’s add these routes into action so open resources/js/admin/App.js and update it as shown:

I imported the Hash Router component then i modified the App component to enclose it with Hash Router then i added the <Routes /> component inside of it. Finally let’s add the links, this can be done in resources/js/admin/components/partials/Sidebar.js

In the above code i used the <Link /> component from the react-router-dom to replace the <a/> tag with the react link, also i imported a special component called withRouter, this is a higher order component that enable us to access route details from inside the component using props, this can be helpful for things like redirecting to another route or getting the current route pathname as you i use this to check for the current route and set “active” class.

Now run

Now you can navigate through the app. The next step in this article is to setup login page and connect this with the laravel login api.

 

Setting Login Page

We will add the api in separate files, and we will use axios javascript library to make ajax calls so create resources/js/admin/apis/Auth.js with the below code:

The above object contains two functions login, logout, and checkAuth. Both functions take success callback and failure callback so that i can add custom code when using these functions in the related components.

Create component resources/js/admin/components/login/Login.js

This is the login component, in the constructor i toggle body classes to use ‘login-page’ class, then is set the state. The state here contains the email, password. The error_message and errors used to store errors coming from the api in case validation error happens.

finally handleSubmit, handleEmail, and handlePassword is bound to this class, this is an essential step in order for these functions to access the state properly.

handleEmail and handlePassword is called whenever an input changes to set the state for email and password respectively. handleSubmit is used to submit the form and call the login api we just created above. In case the login succeeded we redirect the user to the dashboard else we set the error_message and errors so that it can be displayed in the form.

Denying Unauthorized Access

To apply the login we need to make an extra step, which to protect the routes for unauthorized access by redirecting the user to the login page.

To achieve this create this component resources/js/admin/AuthenticatedRoute.js

This component calls component dynamically by passing the component props something similar to slots in Vuejs. Then the component is displayed by checking the localStorage ‘user.api_token’ otherwise the user redirected to the login component using <Redirect /> from the ‘react-router’.

 

Update Routes

Update Routes.js by adding the Login component and applying the AuthenticatedRoute to other components.

resources/js/admin/Routes.js

Update resources/js/admin/components/partials/Sidebar.js

In the above code i check for if the current route is login then we hide the sidebar otherwise we display it also we display the current user name from the localStorage.

Update resources/js/admin/components/partials/Header.js

In the Header component i added a logout function that will be triggered when the user click the logout link. Also in the componentDidMount() hook i called the checkAuth() function using setInterval() to check if the api_token expired therefore the user is redirected to the login page.

Update resources/js/admin/components/partials/Footer.js

 

 

Continue to part5: React Redux

 

Share this: