Full-Stack Web Development with Vue.js and Node

Building Authentication with passport.js Chapter 6

While making the axios call, we will have to pass one extra parameter in the headers. We

need to read the token from the local storage and pass it to the movies API through the

headers.

With this, any user who is not logged in to the app will not be able to view the movie listing

page.

Serving static files for Vue components

Before jumping into the Local Strategy, let's learn a little bit about how we can make our

Vue.js components to be served statically. Since we are using a separate frontend and

backend, it can be a daunting task to keep maintaining these two versions, and especially
while deploying the app, it can take a lot longer to configure everything. So, to manage our

app better, we will build the Vue.js app, which will be a production build, and use the
Node.js server only to serve the files. For that, we will be using a separate package

called serve-static. So, let's go ahead and install the package:

$ npm install serve-static --save

Now, let's add the following contents to our server.js file:

const express = require('express');

const bodyParser = require('body-parser');

const mongoose = require('mongoose');

const cors = require('cors');

const morgan = require('morgan');

const fs = require('fs');

const session = require('express-session');

const config = require('./config/Config');

const passport = require('passport');

const app = express();

const router = express.Router();

const serveStatic = require('serve-static');

app.use(morgan('combined'));

app.use(bodyParser.json());

app.use(cors());

...

// Include controllers

fs.readdirSync("controllers").forEach(function (file) {

if(file.substr(-3) == ".js") {

const route = require("./controllers/" + file)