处理单页Web应用程序中的本地化

时间:2018-03-05 11:00:16

标签: javascript node.js single-page-application i18next

我必须在现有的Node.js Web应用程序中添加本地化机制。 该申请包括:

  • Node.js服务器
  • Dojo / javascript单个网页(即根据需要显示每个app.js var express = require('express'); var i18next = require('i18next'); var FsBackend = require('i18next-node-fs-backend'); var middleware = require('i18next-express-middleware'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var https = require('https'); var routes = require('./routes/index'); i18next .use(FsBackend) .init({ lng: 'it', saveMissing: true, debug: true, backend: { loadPath: __dirname + '/locales/{{lng}}/{{ns}}.json', addPath: __dirname + '/locales/{{lng}}/{{ns}}.missing.json' }, preload: [ 'it' ], nsSeparator: '#||#', keySeparator: '#|#' }); var app = express(); app.use(middleware.handle(i18next, { })); app.use('/locales', express.static('locales')); app.post('/locales/add/:lng/:ns', middleware.missingKeyHandler(i18next)); app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: true})); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/', routes); app.use(function (req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); if (app.get('env') === 'development') { app.use(function (err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: err }); }); } app.use(function (err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: {} }); }); module.exports = app;

我已经配置了mounted并且工作正常,在初始请求中添加了一个查询参数:

i18nextify

我的问题与页面加载后如何处理此查询有关。 这里是应用程序的流程:

  1. 用户使用默认网址(即http://127.0.0.1:8000/?lng=en
  2. 加载初始页面
  3. 登录后,服务器检索该用户的预定义语言(应用程序不应向最终用户提供语言选择)
  4. 现在新视图显示了所需的语言
  5. 我发现的一种方式:

    • 客户端在登录答案中收到语言标记('en')后 - 见下文,它将其存储在会话存储中并重新加载将该语言附加到查询请求的页面('/?lng = en') 。在下次重新加载时,如果应用程序发现会话存储中存在该变量,则传递登录页面。注销功能将删除变量。

    我担心这里的安全问题,或会话存储变量与客户端连接的服务器知识之间不同步。

    这是我在服务器上初始化i18next的代码:

    var express = require("express");
    var router = express.Router();
    var fs = require('fs');
    
    router.get("/", function (req, res, next) {
      res.render("index", {title: "Smart Data Collector"});
    });
    
    router.get('/i18nextify.min.js', function(req, res) {
      fs.readFile(__dirname + '/../node_modules/i18nextify/i18nextify.js', 'utf-8', function(err, doc) {
        res.send(doc);
      });
    });
    
    router.post("/api/login", function (req, res, next) {
        var header = JSON.parse(req.headers.login);
        var name = header.name;
        var pin = header.pin;
    
      // myengine is a collection of utility functions
      myengine.login(name, pin, function (result, sid) {
            res.status(200).json({
                result: result.login,
                sid: sid,
                name: name,
                id: result.id,
                lang: result.lang // here the language retrieved by the server
            });
        });
    });
    

    index.js

    script(src="/i18nextify.min.js")
    script(src="/javascripts/dojo/dojo.js")
    script(type="text/javascript").
    
        var translation = window.i18nextify.init({
          debug: true,
          saveMissing: true,
          namespace: 'translation',
          ns: ['common', 'commonNested'],
          ignoreTags: ['SCRIPT', 'h6'],
          ignoreIds: ['ignoreMeId'],
          ignoreClasses: ['ignoreMeClass']
        });
    
        ...other js libraries follows
    

    这里客户端初始化:

    {{1}}

0 个答案:

没有答案