24 - Login Cleanup and Laravel Sanctum

Now that we have created an authentication page and can log in the user, we need to protect the routes, both on the front-end and back-end. So let's implement auth:sanctum Middleware.

Protect Back-end API Calls

We have installed Sanctum earlier with the install:api Artisan command. Now, we can update the API routes to use the auth:sanctum Middleware.

routes/api.php:

Route::get('/user', function (Request $request) { 
    return $request->user();
})->middleware('auth:sanctum'); 
 
Route::group(['middleware' => 'auth:sanctum'], function() { 
    Route::apiResource('posts', PostController::class);
    Route::get('categories', [CategoryController::class, 'index']);
    Route::get('/user', function (Request $request) { 
        return $request->user();
    });
});

Next, we need to redirect the user to the login page, on the front-end. We need to...

The Full Lesson is Only for Premium Members

Want to access all of our courses? (29 h 14 min)

You also get:

54 courses

Premium tutorials

Access to repositories

Private Discord

Get Premium for $129/year or $29/month

Already a member? Login here

Comments & Discussion

katayamahide 2 years ago ✓ Link copied!

Hi Povilas, Thank you for your great lessons. According to the vue-router doc, the next function should be called exactly once otherwise the hook will never be resolved or produce errors.

function auth(to, from, next) { if (JSON.parse(localStorage.getItem('loggedIn'))) { next() } else { next('/login') } }

[Navigation Guards | Vue Router]https://v3.router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)

katayamahide 2 years ago ✓ Link copied!

Also, I think location.assign('/login') shoud be outside the if (JSON.parse(localStorage.getItem('loggedIn'))) scope as all unauthorized users should be moved to login page whether they have loggedIn status or not.

zaini zain 10 months ago ✓ Link copied!

hi..i dont know if this bug or wat....when im in post create or edit.. i refresh page it redirect back to post.index..why this happen? i hv been try for few hours...

{ beforeEnter: auth, component: AuthLayout, children: [ { path: '/dashboard', name: 'dashboard', component: Dashboard, meta: { title: 'Dashboard' } }, { path: '/posts', component: { render: () => h('router-view') }, children: [ { path: '', name: 'post.index', component: PostsIndex, meta: { title: 'List of post' } }, { path: 'create', name: 'post.create', component: PostsCreate, meta: { title: 'Add new post' } }, ] }, ] }

or should i move post to another group instead?

zaini zain 10 months ago ✓ Link copied!

finaly find the root cause...

lesson #23

const loginUser = (response) => { user.name = response.data.name user.email = response.data.email localStorage.setItem('loggedIn', JSON.stringify(true)) router.push({ name: 'posts.index' }) }

and

lesson #25

setup() { const { getUser } = useAuth() onMounted(getUser) }

so when reload...apps getUser detail and then store new data using loginUser....so it will keep push post.index page...so i move router.push outside and it work fine