Module 6.1: Router Guard and Message Service

The Angular CLI will also create guards for us. For simplicity's sake, let’s create the guard in the /services folder. Run ng generate guard services/auth

Again, the Angular CLI created the file for us, but it hasn’t updated the “boss” file. Guards go in the same “providers” section as “services”. Open app.module.ts and add AuthGuard.

import { AuthGuard } from './services/auth.guard';

providers: [
    AuthService, 
    AuthGuard
  ]

And now let’s use the guard, still inside app.module.ts, find the routing configuration for “create” and include this new line. Your create path should look like this:

{
    path: 'create',
    component: CreateComponent,
    canActivate: [AuthGuard]
  },

Now open auth.guard.ts and add “Router” to the existing list of imports from @angular/router, and import the “AngularFireAuth” module. Leave the existing imports alone. Since we imported some things, we’ll need to declare those in the constructor, but wait, there isn't a constructor. I suppose we will have to make one ourselves this time! Our auth guard is going to check the authentication state of the user using a method similar to that of the header.component.ts - don’t be concerned if you don’t fully understand where this function comes from, feel free to do some independent research if you want to know more.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';

import { AngularFireAuth } from 'angularfire2/auth';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private afAuth: AngularFireAuth, private router: Router) {}

  canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.afAuth.authState.map(auth => {
      if (!auth) {
        // If they are not authenticated make them login
        console.log('Access denied by AuthGuard, routing to login');
        this.router.navigateByUrl('login');
        return false;
      } else {
        // If they are authenticated, allow them to proceed
        return true;
      }
    });

  }
}

We're just making sure that users are authenticated before they are allowed to view certain routes here. Serve up your web app and test it. If you are NOT logged in then trying to access /create should send you to the Login page. If you ARE logged in, then you should be able to access /create without issue. Try refreshing the page while on the /create route - it doesn’t break - as long as you are logged in, you can always access /create.

Now that we have successfully secured the create page, let’s work on making the create page send its data to our backend. Since this is a query to the backend, it’s general practice to do this in a service.

Create a message service

The same way that we created our service to handle authentication, let’s also create a service to handle sending and receiving messages to/from Firebase. We will want to use this service in the “Create” component we made earlier.

Run ng generate service services/message

Unfortunately, the Angular CLI doesn’t update the “boss” file for new services. In app.module.ts, we need to import it and add it to providers.

import { MessageService } from './services/message.service';

providers: [
    AuthService,
    AuthGuard,
    MessageService
  ],

Write a DB Call

Inside the message.service.ts file, we will need to access the database. Luckily, AngularFire2 not only has tons of handy functions to deal with creating new users and logging in and out, but also for interacting with the database! Obviously, I think it’s safe to say the package we import won’t be “AngularFireAuth”, that’s the Auth package. Instead, AngularFire has a whole separate package for dealing with the database! Import this database package and instantiate it via the constructor. Since “AngularFireDatabase” is kinda long, let’s abbreviate it to “afd”.

import { Injectable } from '@angular/core';

import { AngularFireDatabase } from 'angularfire2/database';

@Injectable()
export class MessageService {

  constructor(private afd: AngularFireDatabase) { }

}

Now let’s create a function named postMessage. We COULD write this again, just to log the information we receive to the console, but we’ve already done that twice now for the Register and then the Login components while we were building the AuthService, if you don't remember it go back and check out the previous module! Let’s skip the console.log stuff and jump straight to the meat of this function! Let’s build an object - a newMessage object - this is the object that we want to push to Firebase. We need 3 things in this object: the title of the new message, the content of the new message, and we’ll also want the creator’s user id. We'll use the id later when we want users to be able to edit and delete their messages - but only the messages they created. Again, AngularFireAuth provides us easy access to the user’s current “uid” - the unique identifier for that user. Import AngularFireAuth and build the newMessage that we are going to push in message.service.ts.

import { Injectable } from '@angular/core';

import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';

@Injectable()
export class MessageService {

  constructor(private afd: AngularFireDatabase, private afAuth: AngularFireAuth) { }

  sendMessage(messageTitle, messageContent) {
    const newMessage = {
      title: messageTitle,
      content: messageContent,
      owner: this.afAuth.auth.currentUser.uid
    };
    this.afd.list('/messages').push(newMessage).then(() => {
      // successfully sent message
    });
  }

}

We also need to update our create component to use this new service! Import the service in create.component.ts.

 import { MessageService } from '../services/message.service';

Use it in the constructor.

constructor(private messageService: MessageService) { }

Lastly, we need to change our createMessage function to use it!

createMessage() {
    if (
      this.newMessageTitle.trim() === '' || this.newMessageContent.trim() === ''
    ) {
      return;
    }
    // TODO: send to firebase
    this.messageService.sendMessage(this.newMessageTitle, this.newMessageContent);
  }

What we’re really doing in that command is referencing the “/messages” portion of the database (think “table” in SQL) and adding an item to that collection. Each item we send will automatically be given its own unique identifier - referred to as a “key”. Keys are automatically sorted chronologically and are guaranteed to be unique. If we ever need to reference this object, we should do it via that key. Serve up your page and try creating a new message, and then check out the Firebase console. Be sure you’re in the “Database” portion, on the “Data” tab. You should see an entry in your database now! Note: you can shrink the textarea size if you need to, to be able to see the submit button.

Now here’s a fun exercise, and it’s easiest if you have multiple monitors hooked up to your computer. If not, split your screen in half. Have your app pulled up, but also have your Firebase console visible (on another screen, or in another portion of your single screen). Post another message and watch Firebase, you should see your message appear in real time!

We’re now sending information off to our backend! Next, we'll work on getting it back out of the database, and using that data.