I created a component in vue file and I want to fetch data from laravel controller function.
Currently, I have used axios to fetch data. But can I directly call laravel controller function?
Thanks in advance.
No, the only way to communicate with your laravel app is your web service. ( Ex: REST Api )
Because Laravel and Vuejs are completely separated.
Although in using web services you would have different methods.
Expose a route from Laravel/Lumen app
Call the route or url from vue using any http client(axios)
N.B: You cann't call the controller method on Laravel app directly from your Vue CLI
You need to do few steps.
in vue js file script area
const url = `https://www.naveedramzan.com/api/getData/users/4`;
Axios.defaults.headers.common['Authorization'] = `Bearer ${params.token}`; // if you are using some token authentication
Axios.get(url,{params: params})
.then((response) => {
res(response.data);
})
.catch((err) => {
rej(err);
});
In laravel, routes/api.php file
Route::post('getData/users', 'UsersController#getData');
In laravel, the controller file
use Illuminate\Http\Request;
public function getData(Request $request){
....
}
Related
How to hide my Unsplash api key in Laravel
I am making a call from a Vue component but my "Authorization id" api key is visible for everyone as you can see.
How can I hide the API key in Laravel? I am using Laravel 9.
I want to hide the "headers or just the "Authorization".
Hope someone can guide me :))
Unsplash.vue file:
const myAsync = async function fetchUnsplash() {
const response = await fetch('https://api.unsplash.com', {
headers: {
Authorization: 'Client-ID 1234',
},
});
};
I don't know anything about the API that you are using, nor about Laravel, but I assume, you have a fixed string, that you have to send in the HTTP requests.
Because you mentioned you are using Laravel, you have both frontend and backend code.
So in my opinion
you can create a new endpoint in your Laravel REST API: v1/entries
In the PHP code, you have to call the https://api.unsplash.com API, with the secret Client ID.
From the Vue component, you have to send your request to your Laravel API endpoint (example: http(s)://<api-baseurl>/v1/entries).
I have a Laravel app with a number of routes behind auth:api. I'd like those routes to be available to users in my Dashboard.
I've tried the following on a route that I have named api.me that is behind auth:api, but Inertia does not provide the Authorization header.
import { useForm } from "#inertiajs/inertia-react";
...
const { data, setData, errors, get } = useForm({});
...
get(route('api.me'));
I assume the route must be behind the auth middleware instead. If so, is it possible to have it use both the auth and auth:api middlewares?
It looks like the best way to handle this is to provide the data via the controller or route.
The route should return:
Route::get('/subscription', function() {
return Inertia::render('some/route', [
'me_info' => Auth::user(),
'other_data' > ['some' => 'other data']
]);
});
If you are using React, the me_info and other_data will be made available to the component props.
good day;
I am new in vue.js and I want to build API in my project using vue.js and laravel
I have some question and answer because I got confused
I have services controller that return all service
as below:-
class ServicesController extends Controller
{
public function Services()
{
//get all serveice
$services=Services::where(['deleted'=>1,'status'=>1])->get();
return response()->json($services);
}
}
and API route as below:-
Route::get('/Servicess', 'API\ServicesController#Services');
it is necessary to make a component to send a request to using
Axios request to get data and if yes how to tell the mobile developer about a link to access it.
i want the steps from vue.js side to
prepare data and send it using Axios
You can not use your front-end javascript code inside php controllers, there are two ways to use the data; First: send it via the request. Second: fetch the required data at the back-end side and use it there.
Also there are many alternatives to Axios like the fetch api etc.
Update#1:
example controller
use Illuminate\Http\Request;
class ExampleController extends Controller
{
public function exampleMethod(Request $request){
$name = $request->input('name');
//DO sth
}
}
Route in api.php:
Route::get('/users', 'API\ExampleController#exampleMethod');
I want to set a session in the server and have it available anytime. I'm using Laravel 5.3, I have the following code on one of my controllers:
Session::set('csrf_token', str_random(72));
return view('index', [
'session' => $session,
'csrf_token' => Session::get('csrf_token')
]);
then I made an Ajax request using a package called axios
axios.post('to-that-route', 'some-data')
.then(response => console.log(response))
.catch(err => console.log(err));
My problem is with the controller that handle this ajax request, it seems that it doesn't know the session that I just set, in fact this:
return response()->json(var_dump(Session::get('csrf_token')));
would give me null, that means it doesn't know about the session csrf_token. How do I handle this?
EDIT:
I tried doing this:
public function handler(Request $request) {
// set the session
$request->session()->put('csrf_token', str_rand(72));
}
// the controller that handles the ajax request
public function handler(Request $request) {
return response()->json(var_dump($request->session->get('csrf_token')));
}
it gave me an error saying Session store not set on request.
EDIT:
Sorry about this, I wasn't looking closely, the reason is because the session was set on the web.php which is under web middleware, and the controller that handles the ajax request is in the api.php is under the api middleware.
So I would like to revise the question, is there a way to access the session from the web middleware to the api middleware?
Sorry, my bad.
Sorry about this, I wasn't looking closely, the reason is because the session was set on the web.php which is under web middleware, and the controller that handles the ajax request is in the api.php is under the api middleware.
So I would like to revise the question, is there a way to access the session from the web middleware to the api middleware?
Sorry, my bad.
I'm creating a backend system that I want to use VueJS2 for with a Laravel backend. The problem i'm facing at the moment is integrating this all together while keeping the 'tidy' URLS (no hashbangs) utilising Vue's history mode:
const router = new VueRouter({
routes,
mode: 'history'
})
I am a fan of the way Laravel handles Authentication and as such i've tried to use that in this system as an entry point into the SPA but doing so breaks the history mode.
In my routes file i've added a Vue capture route that works to allow hard refreshing of the browser and back button etc and this works fine:
Route::get('/{vue_capture?}', function () {
return view('home');
})->where('vue_capture', '[\/\w\.-]*');
However in order to use Laravel Auth i've added the following check, which works to force you to login before accessing anything else but breaks the history mode:
if (Auth::check()) {
Route::get('/{vue_capture?}', function () {
return view('home');
})->where('vue_capture', '[\/\w\.-]*');
}
else {
// the home controller has the auth middleware in the __construct
Route::get('/', 'HomeController#index');
}
I've tried adding middleware onto the end of the vue capture route but it didn't seem to do anything.
Many thanks!
To get SPA working with any backend, you should use Api authentication based on JWT.
This is Laravel docs about it: https://laravel.com/docs/5.3/passport
This is good package for this purpose: https://github.com/tymondesigns/jwt-auth