Last active
December 4, 2023 21:36
-
-
Save dabit3/2ff44a171d0cb430590dd56d76d28ebc to your computer and use it in GitHub Desktop.
Using AWS Amplify Vue with routing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() | |
}) |
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:
- 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?
- 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
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/