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.
1 Answer
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);
},
8 Comments
Shehban Patel
Hey, I tried this method but it says undefined variable globalData.
Shehban Patel
I formatted the code like this: <script> let globalData = "{!! $globalData->toJson() !!}"; </script> and public function index() { return view('welcome')->with([$globalData => collect([ 'user' => Auth::user() ]) ]); } If I comment out the script tag in the root blade file, there is no error.
ajthinking
Good formatting, ill edit that. And you should be good just replace $globalData with 'globalData' in your controller. See the difference with my supplied example where it is a string and not a variable?
Joao Polo
Awesome! I prefer front independent react code, using LocalStorage to store the auth code, but I didn't know the blade solution. Thank you
Shehban Patel
@Anders Thank You. This did work once I sorted out my routes. I can get the globalData on the view page by printing {{ $globalData }} but when I type globalData in any of my components, it says undefined. Do I need to pass it in a constructor and load the data from this variable?
|