Hapi js - 如何发送服务器请求进行基本身份验证？

Question

我构建了一个nodejs和vuejs Web应用程序，然后从服务器加载vue js dist文件并渲染它们。另外，我正在使用hapi-auth-basic。现在我想在服务器和前端之间建立连接，但现在，它只显示了一个包含基本字段的提示窗口，我想在vue模板中以我的登录表单嵌入身份验证过程。那怎么办呢？我只是想在出现的提示窗口中执行相同的操作来调用场景。

await server.register([require('hapi-auth-basic'), require('inert')]);

server.auth.strategy('simple', 'basic', {
            key: privateKey, 
            validate: validate,
            // validate: validate 
        });

server.route({
            method: 'GET',
            path: '/{param*}',
            options: {
                auth: 'simple'
            },
            handler: {
                directory: {
                    path: '.',
                    redirectToSlash: true,
                    index: true,
                }
            }
        });

例如，在上述路径中，将出现提示窗口。

Answer 1

ROUTES

 {
        method: 'GET',
        path: '/api/plumber/getHydrantJSON',
        options: {
            description: 'getHydrantJSON',
            auth :'HYDRA',
            tags: ['api', 'information'],
            handler: async (request, h)=> {
                return Controller.PlumberController.getHydrantJSON(request.query,request.auth.credentials)
                    .then(result =>{
                        return h.response(UniversalFunctions.sendSuccess(Config.APP_CONSTANTS.STATUS_MSG.SUCCESS.LOGIN, result));
                    })
                    .catch(reason =>{
                        return h.response(UniversalFunctions.sendError(reason));
                    })
            },
            validate: {
                query: {
                    skip:Joi.number(),
                    limit:Joi.number()
                },
                headers: UniversalFunctions.authorizationHeaderObj,
                failAction: UniversalFunctions.failActionFunction
            },
            plugins: {
                'hapi-swagger': {
                    payloadType: 'form'
                }
            }
        }
    }



 //authentication

exports.plugin = {
    name: 'auth',
    register: async (server, options) => {
        await server.register(require('hapi-auth-jwt2'));
        server.auth.strategy(
            'HYDRA',
            'jwt',
            {
                key          :  Config.APP_CONSTANTS.SERVER.JWT_SECRET_KEY,          //  Never Share your secret key
                validate     :  TokenManager.verifyToken,                           //   validate function defined above
                verifyOptions: { algorithms: [ 'HS256' ] }                         //    pick a strong algorithm
            });

       // server.auth.default('ADMIN');
    }
};

Answer 2

对于初学者，我认为你在这种应用程序中使用了错误的身份验证策略。而不是hapi-auth-basic我会使用hapi-auth-cookie或hapi-auth-jwt2。

您选择的策略将决定如何将经过身份验证的会话发送到服务器。对于JWT（JSON Web令牌），您可以将它们作为客户端上的Header值或作为cookie发送 - 有一些方便的Vue客户端库用于处理这个工作相当不错 - vue-auth is my favorite。

对于hapi-auth-cookie，只要您的Vue应用程序与您的hapi服务器位于同一个域中，您就不需要做任何事情 - 只需确保在Vue客户端的axios / $ http调用中传入withAuthentication: true，以便它知道发送cookie。