Issue with F7 Vue: routes component+ async at same time doesn't works

Questions
1

Hi,

I’m trying to use integration authentication + autorizacion into F7 vue.js app.
My issue is that I need to intercept all routes to check if user is allowed to access.

Searching google I’ve found a post that is exactly what I need to achieve and as explained the original author,
combine beforeEnter or async with vue component doens’t works as this. Digging, I’ve found a trick using redirect but I will prefer to use async or beforeEnter as I believe that is the proper method for what we I need to achieve.

Please check the following post as It explain well the problem

Regards

2

They can work together, use async like in your post and you already says it works:

{
      path: '/chat/',
      async(routeTo, routeFrom, resolve, reject) {
        if (localStorage.getItem('token')) {
          resolve({
            component: require('./assets/vue/pages/chat.vue'),
          });
        } else {
          resolve({
            component: LoginPage
          });
        }
      },
    }
3

Otherwise use component + beforeEnter instead of async

4

And there are examples in docs http://framework7.io/docs/routes.html#route-before-enter-leave

5

You can just router.navigate to whatever you need in beforeEnter after calling reject()

6

The question is I would to have only one function checkAuth to apply on all routes.
I mean define a global function checkAuth but the problem is that with beforeEnter you can’t resolve to another component. Only reject works, but If I use reject I need to some catch up mechanism to show login page instead blank one. You see what I mean ?

7

import HomePage from ‘./pages/home.vue’;
import AboutPage from ‘./pages/about.vue’;
import FormPage from ‘./pages/form.vue’;
import LoginPage from ‘./pages/login.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’;

export default [
{
path: ‘/’,
component: HomePage,
beforeEnter: checkAuth
},
{
path: ‘/panel-left/’,
component: PanelLeftPage,
},
{
path: ‘/panel-right/’,
component: PanelRightPage,
},
{
path: ‘/about/’,
component: AboutPage,
beforeEnter: checkAuth
},
{
path: ‘/login/’,
component: LoginPage
},
{
path: ‘/form/’,
component: FormPage,
beforeEnter: checkAuth
},
{
path: ‘(.*)’,
component: NotFoundPage,
},
];

function checkAuth(to, from, resolve, reject) {
if (!userLogged) {
resolve({component: LoginPage});
}
}

8

As I suggested, You can just router.navigate to whatever you need in beforeEnter after calling reject(). In this case it will navigate to login route instead of requested route. If you need async for every route and you just don’t want to write it every time, then just create custom function where you pass path and component and it will return route object with async and login check, like

securedRoute(path, component) {
  return {
    path,
    async(to, from, resolve, reject) {
      if (loggedIn) {
        resolve(...)
      } else {
        resolve(...)
      }
    }
  }
}

And then when you define routes:

routes = [
  securedRoute(‘/some-page/‘, someComponent),
  securedRoute(‘/another-page/‘, anoherComponent), 
  ...
]
3 Likes
9

works great ! Thank you very much