afikderi / vue-laravel-spa Goto Github PK
View Code? Open in Web Editor NEWSingle Page Application made with Vue.JS2, Vue Router, Vuex and Laravel 5.6.
Single Page Application made with Vue.JS2, Vue Router, Vuex and Laravel 5.6.
axios.defaults.headers.common["Authorization"]
does not work. Each request call says "Token not provided". Would be nice if you fixed.
loginFailed (state, payLoad) {
state.loading = true;
state.authError = payLoad; // not payLoad.error
}
Thought letting you know that the error message return a string not object from the catch error rej("Wrong email or password");
i followed your steps, but i have this problem
app.js:54277 Uncaught TypeError: Cannot read property 'token' of null
The refresh
method inside AuthController.php has an auth()->refresh()
call.
Shouldn't that be auth('api')->refresh()
or is it left on purpose this way?
how to google index vue js components for seo?
Do you have any examples on how to create a public New User Registration page?
This is a great little project and you have a login page for it but no user registration form.
I've created a registration form but I don't know how to use axios to submit the form and save a new user to the users table. I'm not using the customers tables like in your video, I'm just using the default users table to add new registrations.
I have the login process working as per your video series, just need to get the registration process working
Any help would be appreciated.
This is my api.php file
<?php
use Illuminate\Http\Request;
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/
Route::group(['prefix' => 'auth'], function ($router) {
Route::post('login', 'Auth\AuthController@login');
Route::post('logout', 'Auth\AuthController@logout');
Route::post('refresh', 'Auth\AuthController@refresh');
Route::post('register', 'Auth\RegisterController@register');
Route::post('me', 'Auth\AuthController@me');
});
This is my RegisterController.php
<?php
namespace App\Http\Controllers\Auth;
use App\User;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class RegisterController extends Controller
{
/*
|--------------------------------------------------------------------------
| Register Controller
|--------------------------------------------------------------------------
|
| This controller handles the registration of new users as well as their
| validation and creation. By default this controller uses a trait to
| provide this functionality without requiring any additional code.
|
*/
use RegistersUsers;
/**
* Where to redirect users after registration.
*
* @var string
*/
protected $redirectTo = '/login';
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
//$this->middleware('guest');
$this->middleware('auth:api', ['except' => ['register']]);
}
/**
* Get a validator for an incoming registration request.
*
* @param array $data
* @return \Illuminate\Contracts\Validation\Validator
*/
protected function validator(array $data)
{
return Validator::make($data, [
'name' => 'required|string|max:255',
'email' => 'required|string|email|max:255|unique:users',
'password' => 'required|string|min:6|confirmed',
]);
}
/**
* Create a new user instance after a valid registration.
*
* @param array $data
* @return \App\User
*/
protected function register(Request $request)
{
$user = User::create($request->only(["name", "email", "password"]));
return response()->json([
"user" => $user
], 200);
}
/**
* Override the default Laravel Guard here
*/
public function guard(){
return \Auth::Guard('api');
}
}
This is my User.php file
<?php
namespace App;
use Tymon\JWTAuth\Contracts\JWTSubject;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;
class User extends Authenticatable implements JWTSubject
{
use Notifiable;
protected $guarded = [];
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name', 'email', 'password',
];
/**
* The attributes that should be hidden for arrays.
*
* @var array
*/
protected $hidden = [
'password', 'remember_token',
];
/**
* Get the identifier that will be stored in the subject claim of the JWT.
*
* @return mixed
*/
public function getJWTIdentifier()
{
return $this->getKey();
}
/**
* Return a key value array, containing any custom claims to be added to the JWT.
*
* @return array
*/
public function getJWTCustomClaims()
{
return [];
}
}
This is the script in my register.vue file that has the registration form.
<script>
import validate from 'validate.js'
export default {
name: 'register',
metaInfo: {
title: 'Registration'
},
data() {
return {
form: {
name: '',
email: '',
password: ''
},
errors: null
}
},
methods: {
register() {
this.errors = null;
const contraints = this.getContraints();
const errors = validate(this.$data.form, contraints);
if (errors) {
this.errors = errors;
return;
}
//Post New User Registration to the API
axios.post('/api/auth/register', this.$data.form, {
})
.then((response) => {
this.$router.push('/login');
})
},
getContraints() {
return {
name: {
presence: true,
length: {
minimum: 3,
message: "must be at least 3 characters long"
}
},
email: {
presence: true,
email: true,
},
password: {
presence: true,
length: {
password: true,
minimum: 6,
message: "must be at least 6 characters long"
}
}
}
}
}
}
</script>
This is the error I'm seeing when I submit my registration form
bluebird.min.js:29 Unhandled rejection TypeError: Cannot read property 'status' of undefined
and it points to this code
// Send to login page if user accesses a page that needs authentication and they are not logged in.
axios.interceptors.response.use(null, function (error) {
if (error.resposne.status == 401) {
store.commit('logout');
router.push('/login');
}
return Promise.reject(error);
});
hi, i see your code and i don;t find any code that do the logout on the server side, you only remove the user credestial and token from localstorage and vuex only...
so there will be issue if user open the app in 2 tab and do logout on one tab and continue using on the other tab, since the server still recognize this user as logged in one...
except this user reload the page then it will kicked out to login page
i tried to implement my own
logout() {
axios.post('/api/auth/logout')
.then( function( response ){
this.$store.dispatch('auth/logout');
this.$router.push('/login');
})
.catch( error => {
console.log(error);
});
}
but i got error unathorized
Hi, I'm using vue with laravel. i'm coding follow https://www.youtube.com/watch?v=Jd1RW-0lQOs&list=PLJpBh2VJhy5wPhAmjDB42pkHUnqolqxxq&index=1 if i'm refresh page then logout error currentUser = null? how to fix,
Fix:
=> Vue-Laravel-SPA/resources/assets/js/helpers/general.js
Edit Line 16: resposne => response
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.