Properly redirect when user is not logged in and route requires auth

Author: gdarko

resources/js/router/index.js

@@ -12,21 +12,25 @@ const router = createRouter({
 
 router.beforeEach(async (to, from, next) => {
     const authStore = useAuthStore();
+    const requiresAbility = to?.meta?.requiresAbility;
+    const requiresAuth = to?.meta?.requiresAuth;
+    const belongsToOwnerOnly = to?.meta?.isOwner;
+
     if (!authStore.user) {
         await authStore.getCurrentUser();
     }
     if (!authStore.user) {
         authStore.clearBrowserData();
+        if(requiresAuth) {
+            next({name: 'login'})
+        }
     }
 
     if(to?.meta?.isPublicAuthPage && authStore.user) {
         next({name: 'dashboard'})
         return;
     }
 
-    const requiresAbility = to.meta.requiresAbility;
-    const requiresAuth = to.meta.requiresAuth;
-    const belongsToOwnerOnly = to.meta.isOwner;
     if (requiresAbility && requiresAuth) {
         if (authStore.hasAbilities(requiresAbility)) {
             next()

resources/js/stores/auth.js

@@ -103,7 +103,7 @@ export const useAuthStore = defineStore("auth", {
             window.localStorage.removeItem('currentUser');
         },
         hasAbilities(abilities) {
-            return this.user.hasOwnProperty('abilities') && !!this.user.abilities.find((ab) => {
+            return this.user && this.user.hasOwnProperty('abilities') && !!this.user.abilities.find((ab) => {
                 if (ab.name === '*') {
                     return true
                 }
@@ -118,7 +118,7 @@ export const useAuthStore = defineStore("auth", {
 
         hasAllAbilities(abilities) {
             let isAvailable = true
-            if (this.user.hasOwnProperty('abilities')) {
+            if (this.user && this.user.hasOwnProperty('abilities')) {
                 this.user.abilities.filter((ab) => {
                     let hasContain = !!abilities.find((p) => {
                         return ab.name === p