How check user loggedin condition when routing?

Questions
1

Hi, I am trying to check user loggedin condition when routing, but I am not sure how do properly, lease suggest how to do it

Here is routes.js and Main.js files.

In the template I use, it imports routes in Main.js and use as below

Main.js

import Routes from './routes.js'
// Init F7 Vue Plugin
Vue.use(Framework7Vue, Framework7)

new Vue({
  el: '#app',
  template: '<app/>',
  store,
  // Init Framework7 by passing parameters here
  framework7: {
    id: 'com.base.app', // App bundle ID
    name: 'BaseApp', // App name
    theme: 'auto', // Automatic theme detection
    // App routes
    routes: Routes
  },
  // Register App Component
  components: {
    app: App
  }
})

and here is the routes.js file

import Login from './pages/login.vue'
import HomePage from './pages/home.vue'
import AboutPage from './pages/about.vue'
import FormPage from './pages/form.vue'
import DynamicRoutePage from './pages/dynamic-route.vue'
import NotFoundPage from './pages/not-found.vue'
import PanelLeftPage from './pages/panel-left.vue'
import PanelRightPage from './pages/panel-right.vue'
import Favorites from './pages/favorites'
import Contact from './pages/contact.vue'

export default [
  {
    path: '/',
    component: HomePage,
    on: {
      pageBeforeIn: (event, page) => {
        alert('Check router.js file. path:"/" to manage router guard on HOME')
        // Validate with store TOKEN, uncomment when implemented!
        // if (!store.state.credentials.token) this.navigate('/login/')
      }
    }
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/panel-left/',
    component: PanelLeftPage
  },
  {
    path: '/panel-right/',
    component: PanelRightPage
  },
  {
    path: '/home/',
    component: HomePage
  },
  {
    path: '/about/',
    component: AboutPage
  },
  {
    path: '/form/',
    component: FormPage
  },
  {
    path: '/favorites',
    name: 'Favorites',
    component: Favorites
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact
  },
2

I guess you also need to import store to your routes file so you can access it here, e.g.

import store from 'store/location`
3

I can import it but how will I implement checking ?

4

It is better to do with async routes:

import Login from './pages/login.vue'
import HomePage from './pages/home.vue'
...
export default [
  {
    path: '/',
    async(to, from, resolve, reject) {
      if (!store.state.credentials.token) {
        resolve({ component: Login });
      } else {
        resolve({ component: Home });
      }
    }
  }
]
1 Like
5

I have do that. but the route component is not reactive. so when i click login button, still in login

6

Thank you nolimits4web, it solve by adding reloadCurrent