带PassportJS的Nuxt身份验证？

Question

如何使用JWT（后端express）将nuxt身份验证模块（前端）与passport-local一起使用？

定义用于验证jwt令牌的jwt策略（express）

    var JwtStrategy = require('passport-jwt').Strategy,
        ExtractJwt = require('passport-jwt').ExtractJwt;
    var opts = {}
    opts.jwtFromRequest = ExtractJwt.fromAuthHeaderAsBearerToken();
    opts.secretOrKey = 'secret';
    opts.issuer = 'accounts.examplesoft.com';
    opts.audience = 'yoursite.net';
    passport.use(new JwtStrategy(opts, function(jwt_payload, done) {
        User.findOne({id: jwt_payload.sub}, function(err, user) {
            if (err) {
                return done(err, false);
            }
            if (user) {
                return done(null, user);
            } else {
                return done(null, false);
                // or you could create a new account
            }
        });
    }));

定义用于验证用户名nad密码的本地策略（express）

    passport.use(new LocalStrategy(
      function(username, password, done) {
        User.findOne({ username: username }, function (err, user) {
          if (err) { return done(err); }
          if (!user) { return done(null, false); }
          if (!user.verifyPassword(password)) { return done(null, false); }
          return done(null, user);
        });
      }
    ));

验证用户名和密码后颁发令牌的代码（expresss）

    app.post('/login', 
      passport.authenticate('local', { failureRedirect: '/login' }), //need to update from nuxt auth.
      function(req, res) {
        res.redirect('/');
      });

nuxt身份验证本地策略使用用户名和password返回一个JWT令牌（nuxt）

    this.$auth.loginWith('local', {
      data: {
        username: 'your_username',
        password: 'your_password'
      }
    })

它可以独立工作，我如何结合这些？

Answer 1

快递代号

创建passport策略

const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const JwtStrategy = require('passport-jwt').Strategy;

passport.use(
    new LocalStrategy(
        {
            usernameField: 'username',
            passwordField: 'password'
        },
        function(username, password, done) {
            users.findOne({ email: username }, function(err, user) {
                if (err) {
                    return done(err);
                }
                if (!user) {
                    return done(null, false, { error: 'Invalid username' });
                }
                if (!user.checkPassword(password)) {
                    return done(null, false, { error: 'invalid password' });
                }

                const info = { scope: '*' };
                done(null, user, info);
            });
        }
    )
);


const opts = {};
opts.jwtFromRequest = ExtractJwt.fromAuthHeaderAsBearerToken();
opts.secretOrKey = 'JWT_SECRET_OR_KEY';
passport.use(
    new JwtStrategy(opts, function(payload, done) {
        users.findById(payload, function(err, user) {
            if (err) {
                return done(err, false);
            }
            if (user) {
                return done(null, user);
            }
            return done(null, false);
        });
    })
);

使用passport策略

const express = require('express');
const passport = require('passport');
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

app.use(passport.initialize()); // Used to initialize passport

// Routes

app.post(
        '/login',
        passport.authenticate('local', { session: false }),
        function(req, res) {
            const token = jwt.sign(req.user.userId, 'JWT_SECRET_OR_KEY');
            return res.json({ token });
        }
    );
app.get(
    '/me',
    passport.authenticate(['jwt', 'bearer'], { session: false }),
    function(req, res, next) {
    const { userId } = req.user;
    users.findOne({ _id: userId }, (err, data) => {
        if (err) {
            res.status(500).send(err);
        } else if (data) {
            const userData = data;
            res.status(200).send(userData);
        } else {
            res.status(500).send('invalid token');
        }
    });
}
);

nuxt的配置

在nuxt.config.js内部

 auth: {
    resetOnError: true,
    redirect: {
      login: '/login', // User will be redirected to this path if login is required.
      home: '/app/dashboard', // User will be redirect to this path after login. (rewriteRedirects will rewrite this path)
      logout: '/login', // User will be redirected to this path if after logout, current route is protected.
      user: '/user/profile',
      callback: '/callback // User will be redirect to this path by the identity provider after login. (Should match configured Allowed Callback URLs (or similar setting) in your app/client with the identity provider)
    },
    strategies: {
      local: {
        endpoints: {
          login: {
            url: '/login',
            method: 'post',
            propertyName: 'token'
          },
          logout: false,
          user: {
            url: '/me',
            method: 'GET',
            propertyName: false
          }
        },
        tokenRequired: true,
        tokenType: 'Bearer'
      }
}

内部登录。vue

    this.$auth
      .loginWith('local', {
        data: {
          username: this.user.email,
          password: this.user.password
        }
      })
      .catch(err => {
        console.error(err );
      });