How do I pass the username (stored in localstorage Token) to the backend? (Syncfusion schedule)

Question

I am using the Syncfusion Scheduler into my MEAN-application. This is the code in my backend to CRUD Events:

index.js

MongoClient.connect(url, function (err, db) {

if (err) throw err;
var dbo = db.db("meanstacknew");
app.use(function (req, res, next) {

    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});
app.post("/GetData", (req, res) => {

       dbo.collection('ScheduleData').find({'CreatedBy':'**here I want only the current logged in username**'}).toArray((err, cus) => {
        res.send(cus);
        console.log(req)
    });
});



app.post("/BatchData", (req, res) => {
    console.log(req.body);
    var eventData = [];
    if (req.body.action == "insert" || (req.body.action == "batch" && req.body.added.length > 0)) {
        (req.body.action == "insert") ? eventData.push(req.body.value) : eventData = req.body.added;
        for (var i = 0; i < eventData.length; i++) {
            var sdate = new Date(eventData[i].StartTime);
            var edate = new Date(eventData[i].EndTime);
            eventData[i].StartTime = (new Date(+sdate - (sdate.getTimezoneOffset() * 60000)));
            eventData[i].EndTime = (new Date(+edate - (edate.getTimezoneOffset() * 60000)));
            dbo.collection('ScheduleData').insertOne(eventData[i]);
        }
    }
    if (req.body.action == "update" || (req.body.action == "batch" && req.body.changed.length > 0)) {
        (req.body.action == "update") ? eventData.push(req.body.value) : eventData = req.body.changed;
        for (var i = 0; i < eventData.length; i++) {
            delete eventData[i]._id;
            var sdate = new Date(eventData[i].StartTime);
            var edate = new Date(eventData[i].EndTime);
            eventData[i].StartTime = (new Date(+sdate - (sdate.getTimezoneOffset() * 60000)));
            eventData[i].EndTime = (new Date(+edate - (edate.getTimezoneOffset() * 60000)));
            dbo.collection('ScheduleData').updateOne({ "Id": eventData[i].Id }, { $set: eventData[i] });
        }
    }
    if (req.body.action == "remove" || (req.body.action == "batch" && req.body.deleted.length > 0)) {
        (req.body.action == "remove") ? eventData.push({ Id: req.body.key }) : eventData = req.body.deleted;
        for (var i = 0; i < eventData.length; i++) {
            dbo.collection('ScheduleData').deleteOne({ "Id": eventData[i].Id });
        }
    }
    res.send(req.body);
});
});

In angular side, I have this code to retrieve the users username (which is stored in localstorage):

schedule.component.ts

ngOnInit() {
this.userName = JSON.parse(localStorage.getItem("user"));

  this.email = profile.user.email;
  console.log(this.userName.username)

}

By this code below, I Add the 'createdBy' field automtically with created events:

schedule.component.ts

  onActionBegin(args: ActionEventArgs): void {
if (args.requestType === "eventCreate") {
  args.data[0].CreatedBy = this.email;

}

}

So i want to query that the CreatedBy field matches that of the value of the token, if that makes sense. How do I achieve this? How can I access the client side variable in Expressjs?

Answer 1

Dear Customer,

Syncfusion Greetings

To send an additional custom parameter to the server-side post, you need to make use of the addParams method of query. Now, assign this query object with additional parameters to the query property of Scheduler. We have prepared a below sample to pass tokens as an additional parameter to the scheduler and same can be available in below link. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AdditionalParameterSample505803347 

Please refer below UG Link.
https://ej2.syncfusion.com/angular/documentation/schedule/data-binding/#passing-additional-parameters-to-the-server

App.component.ts file:

  ngOnInit(): void {
    this.selectedDate = new Date(2018, 1, 14);
    this.email = "username@gmail.com"; // Here we used static email address for your reference. Kindly map your currently logined user email to achieve your scenario.
    this.userName = "usename"; // Here we used static user name for your reference. Kindly map your currently logined username to achieve your scenario.
    this.data =  { Name: this.userName, Email: this.email };
    this.dataQuery = new Query().addParams('tokens', this.data as any);
    this.eventSettings = { dataSource: this.dataManager, query: this.dataQuery };
  }

Server.js file:

    app.post("/GetData", (req, res) => {
        var query = { CreateBy: req.body.params.tokens.Email };
        dbo.collection('ScheduleData').find(query).toArray((err, cus) => {
            res.send(cus);
        });
    });


Kindly try the above sample, if you have any concerns please revert us back for further assistance.

Regards,
M.Vinitha devi