let userDashboard = FlowRouter.group({
prefix: '/user/dashboard',
name: 'userArea',
triggersEnter: [function (context, redirect) {
if (!Meteor.user()) {
FlowRouter.go('/user/login');
}
}]
});
If I am not logged in and go to /user/dashboard, I get bounced to /user/login but with a warning:
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) <div class=“container” data-reac
(server) <div class=“user-layout” data-
Am I doing something wrong? My guess is that since this is on both client and server, there’s a brief moment of them being out of sync.
You are requesting a template from /user/dashboard and the server sends that as the first response
Then the client router logic runs and figures out that that’s not the right template because you are not logged in
The template from /user/login gets rendered
What you should do anyway is get that authentication logic out your router. Authentication is dependent on a reactive method but flow router explicitly frowns upon reactivity in the router layer.
So it’s clear that I need to move the auth checking out of the router. But I still want to be able to redirect. In other words, what I don’t want is this:
User goes to /user/dashboard -> is presented with a login form at that URL
What I do want:
User goes to /user/dashboard -> is redirected to /user/login
The reason for this is that I want to maintain compatibility with automatic form fillers like 1Password and Dashlane, which remember a specific URL in order to auto-login.
I’m not really sure how to go about this. I have a UserLayout component which is basically the shell for all the password-protected user pages, and this does not work:
I still get the client/server mismatch warning. I get the part about Accounts.onLogin, but what about redirecting when the user is trying to access a protected page?
But I still get the warning. I guess my options are:
Forget SSR and go with a traditional client-side solution. The main reason I’m interested in SSR is to make SEO a lot more straightforward, but SSR has been a bit troublesome (on another project as well).
Just render the login/signup form on whatever restricted page the user hits (dashboard, account settings, etc).
I think the way FR suggest to not to redirect, but to render something on the same layout (without changing the route).
We build this with a reason, and I hope we’ve covered it in the Routing Guide (and check some Meteor forum links in that).
If you do that, SSR works pretty well.
We’ve not implemented a solution for redirecting in server side yet. Still, figuring out options.