3
votes

I'm currently trying to build an app that needs the user to authenticate with CAS (Centrale Authentication Service) to use it. I'm using Angular 5 for the front-end and Node.js for the back-end.

To authenticate the user on the server side I'm using a module called 'r-cas-authentication' which creates an express-session when the user is authenticated. The fact is I don't know how to check on the Angular side if the user is authenticated and otherwise redirect him on the CAS authentication page.

Do you know how I could do that? Thanks!

1

1 Answers

1
votes

You don't need to deal with this on angular side. Just have the Node server redirect the unauthenticated users to a login page, always. Browser sets the session headers, and your Node server will see there's no auth and send a redirect. The r-cas-authentication module mentions the bounce and bounce_redirect options in the docs, this will further streamline the process.

Your node instance will serve the login page.:

app.get('/login', (req, res) => res.sendFile('path/to/login.html'));

Additionally, your assets (frontend scripts, css, images, etc) are (usually) free to have:

app.get('/assets', express.static(pathToStaticDirectory));

Also, you have authentication endpoint:

app.get( '/authenticate', cas.bounce_redirect );

Next, it needs to serve the Angular app. It will, however, require a cas session here. We target '/home' but it can be another path like '/' or whatever have you.

app.get('/home', cas.bounce, express.static(pathToAngularAppDirectory);

Finally, you will likely have REST API endpoints that you want protected:

app.use('/api', cas.block, appRoutes);

Now, here's what happens. Request comes infrom the browser. It hits the '/home' route. Since the browser is on it'S first visit, there's no authentication headers set. It will hit the cas.bounce() block and get redirected to /login route. Once it goes there, it gets served login.html*.

You enter your login data there and hit Login button - the page gets submitted, and cas middleware authenticates the user - sets the session data and all to browser. Browser will cary these around with it (note I say browser, not Angular). It also redirects the user back to '/home' page.

Now your browser has the session info, so it gets a pass on the route, gets served the Angular files, the app starts normally. All is cool.

There is one more case you might wanna handle from Angular.

Let's say your session expired. And the browser was left open or something. The user revisits the page - all cool, cas.bounce will redirect the user back to login form.

But what if the user simply clicks "refresh" in your app? Then Angular's HttpClient gets a 401 response (as per node module docs). You can have a simple http interceptor that does a window.location.reload() or similar (basically a full page reload, not client-side navigation), and on a page reload, your app get's caught into cas.bounce because it's trying to reload /home unauthenticated.