Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I check if user is 'logged in' in a react component when using laravel authentication?

Tags:

I have setup laravel authentication in my website. It works very well but I want to know how I can check if a user is logged in when inside a react component and display his/her specific content.

like image 668
Shehban Patel Avatar asked Apr 08 '19 02:04

Shehban Patel


People also ask

Which of the following can be used to check if a user is logged in or not in React?

Check if a user has previously logged in Next, we want a way to check if there's a user logged in each time the App loads. For that, we use the useEffect hook. useEffect(() => { const loggedInUser = localStorage. getItem("user"); if (loggedInUser) { const foundUser = JSON.


1 Answers

One approach I have used to solve the problem with checking if the user is logged in is to attach it in your main blade file as 'global data'. First set up your controller.

public function index()
{        
    return view('welcome')->with(["globalData" => collect([
        'user' => Auth::user()
    ]);
}

Then in your root blade file

<script>
    let globalData = "{!! $globalData->toJson() !!}";
</script>

Then you can access a user property anywhere in your components by refering to globalData.user and thus test if user is an object or null/empty.


Example from a React project with version 15.4.2

Controller

class GuiController extends Controller
{
    public function __construct() {
        $this->data = [
            'projects' => $this->projects(), 
            'packs' => Pack::all(),
            'stimpack_io_token' => env('STIMPACK_IO_TOKEN'),
            'stimpack_data_url' => env('STIMPACK_DATA_URL'),
            'manipulatorData' => ManipulatorController::attachStartupData()
        ];
    }

    public function index()
    {        
        return view('welcome')->with(["data" => collect($this->data)]);
    }

View

<body>            
    <div id="main"></div>
    <script>
        let data = {!! $data->toJson() !!};
    </script>
    <script src="{{asset('js/app.js')}}" ></script>                
</body>

Usage inside component

upload() {
    var compiler = new Compiler(this.props.engine);
    var compiled = compiler.compile();
    $.ajax({
        type: "POST",
        beforeSend: function(request) {
            request.setRequestHeader("stimpack-io-token", data.stimpack_io_token);
        },
like image 68
ajthinking Avatar answered Sep 28 '22 12:09

ajthinking