Skip to content

Instantly share code, notes, and snippets.

@dabit3

dabit3/Router.vue

Last active Nov 20, 2020
Embed
What would you like to do?
Using AWS Amplify Vue with routing
const router = new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home,
meta: { requiresAuth: true}
},
{
path: '/notes',
name: 'Notes',
component: Notes,
params: {
'foo': 'bar'
},
meta: { requiresAuth: true}
},
{
path: '/menu',
name: 'Menu',
component: Menu,
meta: { requiresAuth: true}
},
{
path: '/profile',
name: 'Profile',
component: Profile,
meta: { requiresAuth: true}
},
{
path: '/auth',
name: 'Authenticator',
component: components.Authenticator
}
]
});
router.beforeResolve((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
let user;
Vue.prototype.$Amplify.Auth.currentAuthenticatedUser().then(data => {
if (data && data.signInUserSession) {
user = data;
}
next()
}).catch((e) => {
next({
path: '/auth',
query: {
redirect: to.fullPath,
}
});
});
}
next()
})
@aossey

This comment has been minimized.

Copy link

@aossey aossey commented May 24, 2020

I'm trying to follow your tutorial here and adapt it to my paths, but code in line 41 of this gist causes the following error when you build and run the solution.

Cannot read property 'Auth' of undefined

Any idea what I may be doing wrong in my code here:

import VueRouter from "vue-router";
import Vue from "vue";

import Home from "./components/Home";
import Profile from "./components/Profile";
import SignIn from "./components/SignIn";
import Protected from "./components/Protected";

const routes = [
  { path: "/", component: Home },
  { path: "/signin", component: SignIn },
  { path: "/protected", component: Protected, meta: { requiresAuth: true } },
  { path: "/profile", component: Profile, meta: { requiresAuth: true } },
];

const router = new VueRouter({
  routes,
});

/* eslint-disable no-unused-vars */
router.beforeResolve((to, from, next) => {
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    let user;
    Vue.prototype.$Amplify.Auth.currentAuthenticatedUser()
      .then((data) => {
        if (data && data.signInUserSession) {
          user = data;
        }
        next();
      })
      .catch((e) => {
        next({
          path: "/signin",
        });
      });
  }
  next();
});
/* eslint-enable no-unused-vars */

export default router;

Thank you for the tutorial and in advance for the answer.

@dabit3

This comment has been minimized.

Copy link
Owner Author

@dabit3 dabit3 commented May 24, 2020

Hey @aossey, I've just updated the post to use the most current versions of all of our libraries, everything should be working now.

@aossey

This comment has been minimized.

Copy link

@aossey aossey commented May 24, 2020

Awesome! Thanks for taking time to do that, really appreciate it.

@cnegrisanu

This comment has been minimized.

Copy link

@cnegrisanu cnegrisanu commented May 26, 2020

Hey @aossey, I've just updated the post to use the most current versions of all of our libraries, everything should be working now.

Hi Nader(@dabit3), you mentioned that you updated your post to use the most current versions of all the libraries which is great but going to the AWS Docs, the Vue Framework guides are still utilizing aws-amplify-vue. Can these also be updated? And until then, can you explain a bit how to use the new libraries as a plugin in Vue and if we should still be using the AmplifyEventBus or you recommend using the Hub? Thank you very much!

@dabit3

This comment has been minimized.

Copy link
Owner Author

@dabit3 dabit3 commented May 26, 2020

Hey @cnegrisanu, can you you point me to the docs still using the old Vue libraries?

I know we've updated most of our documentation here to use the new ones: https://docs.amplify.aws/

@cnegrisanu

This comment has been minimized.

Copy link

@cnegrisanu cnegrisanu commented May 27, 2020

Damn, don't I feel stupid now?.. Here's the link that I was looking at. I guess it's a full copy of the previous Docs version and it looked so real that I didn't even check the url...
Anyway, I guess problem solved, however, there are two things I'm struggling with:

  1. With the new Amplify library changes for Vue, how can I still use it as a plugin, I mean, the portion with Vue.use(AmplifyPlugin, AmplifyModules), what do I replace that with? And should I use Hub to replace the AmplifyEventBus?
  2. When using the Datastore with @auth, how can I make sure that a new logged in user will not see the records already synced to the IndexDB from the previously logged in user? Shouldn't Datastore know somehow either clear the IndexDB store or only fetch and display the records for the new user?
    Thanks a lot !
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment