Nuxt auth是否使用passportjs？

Question

如何通过JWT（后端Express）将nuxt auth模块（前端）与passport-local一起使用？

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

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
        }
    });
}));

定义验证用户名和密码（快速输入）的本地策略

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);
    });
  }
));

验证用户名和密码（表示）后发行令牌的代码

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

nuxt auth本地策略使用用户名，并且密码返回JWT令牌（nuxt）

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

它可以独立工作，我如何将它们结合起来？

Answer 1

快递代码

创建护照策略

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 = process.env.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);
        });
    })
);

使用护照策略

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(express.static(path.join(__dirname, 'public')));

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, process.env.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(200).send({
                permissions: {
                    none: []
                }
            });
        }
    });
}
);

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: process.env.CALLBACK_URL || env.CALLBACK_URL // 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 );
      });