feat: implement redirect if page requires auth, todo: redirect on logout

Author: akinsey

src/composables/stores/auth.js

@@ -3,11 +3,24 @@ import { cloneDeep } from 'lodash'
 import { authApi } from '@/api'
 import { PreferencesStore } from '@/composables/stores/prefs'
 import PermissionUtils from '@/composables/utils/permissions'
+import localStorageCache from '@/composables/utils/localStorageCache'
 
 const AUTH_KEY = 'auth'
+const appCache = localStorageCache(0, 'app')
+const emtpyUser = {
+  avatar: '',
+  id: null,
+  moderating: [],
+  permissions: {},
+  roles: [],
+  token: null,
+  username: ''
+}
 
 export const AuthStore = Symbol(AUTH_KEY)
 
+export const localStorageAuth = () => appCache.get(AUTH_KEY) || { data: emtpyUser }
+
 export default {
   setup() {
     /* Internal Data */
@@ -16,32 +29,21 @@ export default {
     const $prefs = inject(PreferencesStore)
 
     const cachedUser = $appCache.get(AUTH_KEY)
-    const emtpyUser = {
-      avatar: '',
-      id: null,
-      moderating: [],
-      permissions: {},
-      roles: [],
-      token: null,
-      username: ''
-    }
 
     /* Provided Data */
     const user = reactive(cachedUser ? cachedUser.data : cloneDeep(emtpyUser))
 
     /* Provided Methods */
-    const login = (username, password, rememberMe) => {
-      authApi.login({ username, password, rememberMe })
+    const login = (username, password, rememberMe) => authApi.login({ username, password, rememberMe })
       .then(dbUser => {
         $appCache.set(AUTH_KEY, dbUser)
         Object.assign(user, dbUser)
         $prefs.fetch()
         $alertStore.success(`Welcome ${user.username}, you have successfully logged in!`)
       }).catch(() => {})
-    }
 
-    const logout = () => {
-      authApi.logout()
+
+    const logout = () => authApi.logout()
       .then(() => {
         delete user.token // clear token to invalidate session immediately
         $appCache.delete(AUTH_KEY)
@@ -51,10 +53,7 @@ export default {
         setTimeout(() => { Object.assign(user, cloneDeep(emtpyUser)) }, 500)
       }).catch(() => {})
 
-    }
-
-    const register = (email, username, password) => {
-      authApi.register({ email, username, password })
+    const register = (email, username, password) => authApi.register({ email, username, password })
       .then(dbUser => {
         // Set user session if account is already confirmed (log the user in)
         if (!dbUser.confirm_token) {
@@ -66,7 +65,6 @@ export default {
         // TODO(akinsey): implement flow for when email confirmation is enabled
         // else {}
       }).catch(() => {})
-    }
 
     /* Provide Store Data */
     return provide(AuthStore, {

src/router/index.js

@@ -9,6 +9,7 @@ import NotFound from '@/views/layout/NotFound.vue'
 import Login from '@/views/layout/Login.vue'
 import NProgress from 'nprogress'
 import { nextTick } from 'vue'
+import { localStorageAuth } from '@/composables/stores/auth'
 
 const routes = [
   {
@@ -21,6 +22,7 @@ const routes = [
     path: '/login',
     name: 'Login',
     component: Login,
+    props: true,
     meta: { requiresAuth: false, bodyClass: 'login' }
   },
   {
@@ -75,9 +77,13 @@ const router = createRouter({
   }
 })
 
-router.beforeEach(() => {
+router.beforeEach((to) => {
   // Start progress bar
   NProgress.start()
+
+  if (to.meta.requiresAuth && !localStorageAuth().data.token) {
+    router.push({ name: 'Login', params: { redirectTo: to.name || 'Boards' } })
+  }
 })
 
 router.afterEach(to => {

src/views/layout/Login.vue

@@ -38,21 +38,27 @@
 <script>
 import { reactive, inject, toRefs, nextTick } from 'vue'
 import { AuthStore } from '@/composables/stores/auth'
+import { useRouter } from 'vue-router'
 
 export default {
   name: 'Login',
-  setup() {
+  props: ['redirectTo'],
+  setup(props) {
     nextTick(() => v.focusInput.focus())
     /* Template Methods */
     const login = () => {
       $auth.login(v.user.username, v.user.password, v.user.rememberMe)
+      .then(() => {
+        $router.push( { name: props.redirectTo })
+      })
     }
 
     const signInWithGoogle = () => console.log('Sign in with Google!')
 
 
     /* Internal Data */
     const $auth = inject(AuthStore)
+    const $router = useRouter()
 
     /* Template Data */
     const v = reactive({