Skip to content

Instantly share code, notes, and snippets.

@dabit3
Last active December 4, 2023 21:36
Show Gist options
  • Save dabit3/2ff44a171d0cb430590dd56d76d28ebc to your computer and use it in GitHub Desktop.
Save dabit3/2ff44a171d0cb430590dd56d76d28ebc to your computer and use it in GitHub Desktop.
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()
})
@dabit3
Copy link
Author

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
Copy link

aossey commented May 24, 2020

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

@cnegrisanu
Copy link

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
Copy link
Author

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
Copy link

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