Which way to load navbar for user/admin in NodeJS/AngularJS - angularjs

I have a request, Can anyone tell me, how to properly do. I want to make two navbars in my project, first is intended for admin, second for user. I use with NodeJS (back), AngularJS (front). At the moment I created on the side NodeJS script, Which checks the status of the user role:
In router index.js (I think its good place?)
router.get('/checkRole', function (req, res) {
if (req.user != null) {
if (req.user.role == 'admin') {
res.json('admin');
}
} else {
res.json('user');
}
});
Now the question is what next?
Create Service with http.get to index route, and every time, when will be loaded page check status and load navbar?
(Important thing)
So I need in each controller to add a service (http get, check status, load navbar) yes?
Or is another way? Can someone explain me??
Sorry for english, and thanks for help.

Related

getInitialProps causing ERR_TOO_MANY_REDIRECTS error on my live site, but not on my local version

So, I've been trying to implement cookies on my website, to keep track of a list of JavaScript objects, so the page stays consistent when the user comes back to it. I've been following this tutorial here.
On my local machine, using npm run dev on localhost:3000, it works absolutely perfect. However, when I push the commit to GitHub, it builds on Vercel without any issue, but when I try and access the live website on the internet, it gives me a 'ERR_TOO_MANY_REDIRECTS' error.
I'm pretty confused as to why it would work perfectly fine on my locally hosted site, but freaks out and does not work when it's put into production.
I think I have narrowed the problem down to getInitialProps because when I comment out the implementation in my index.js file, it still doesn't work, but when I comment out getInitialProps, it works again.
Here is the code I think may be the problem.
Home.getInitialProps = async ({req, res}) => {
const data = parseCookies(req)
if (res) {
if (Object.keys(data).length === 0 && data.constructor === Object) {
res.writeHead(301, { Location: "/" })
res.end()
}
}
return {
data: data && data,
}
}
And here is the code for that parseCookies method, which is imported as
import { parseCookies } from "../helpers/index"
within my index.js
import cookie from "cookie"
export function parseCookies(req) {
return cookie.parse(req ? req.headers.cookie || "" : document.cookie)
}
I'm super confused at this point, I've walked myself through the code a dozen times now and still have no idea what I might be doing wrong. Any help would be much appreciated! And please lemme know if there's anymore info I can provide!
The ERR_TOO_MANY_REDIRECTS error occurs because Object.keys(data).length === 0 && data.constructor === Object returns true when no cookies are set and you access the homepage. When this happens the redirect takes you back to / (the homepage) which then makes the check again and a new redirect occurs, and so on.
Locally, you probably have cookies set, so you don't experience the issue. However, when you access the website hosted on Vercel, no cookies are present initially, which triggers the infinite redirect cycle.
To fix the issue simply remove the logic from the homepage, since that's the redirect destination. You can still have it on other pages and redirect to the homepage, though.

Disabling routes in angular js + laravel project

I have a laravel application which uses angular js as the front end. There I need to disable this route. appo.dev/ which means the root path of the application. How can I disable that path only. Here I need to access other routes such as appo.dev/progess. I tried the following way in routes.php file. It's better if I can find a solution with this code.
Route::any('{path?}', function () {
return view("appo_app");
})->where("path", ".+")
->whereNotIn("path", "appo.dev/");
Above without whereNotIn clause it will work for all the routes. So I am thinking a way to disable only that particular route via wherenotin clause. Or is there a better wild card character? Anyone knows how to solve this issue.
Maybe without what you want is like the root route did not exist, you can try this.
And it will return an error 404. Maybe that's what you're looking for?
I assume that appo.dev is the domain.
Route::any('/', function () {
abort(404);
});
Route::any('{path?}', function () {
return view("appo_app");
})->where("path", ".+");
If it were not the domain, maybe this will help you.
Route::any('appo.dev', function () {
abort(404);
});
Route::any('appo.dev/{path?}', function () {
return view("appo_app");
})->where("path", ".+");
I hope it helps you. A cordial greeting.

Angularjs 1: delete an item, but item still exist until refresh

Here is my simple angular 1 app.
Source code here.
Basically it is a copy of this.
I am able to do CRUD operations. The issue is that, when I delete a record. It redirects back to the home page. The record I deleted is still here. If I refresh the page, it is gone.
Is it a way to delete a record and then after redirect, I should see the latest list?
Update 1:
Unfortunately, it is still unresolved. Something strange that it seems the promise in resolve is cached. I added a few console.log inside the code. You can see the code flow. Open chrome developer tool to see it.
i review you code , the problem is here:
this.deleteContact = function(contactId) {
var url = backend_server + "/contacts/" + contactId;
// actually http delete
return $http.delete(url)
.then(function(response) {
return response;
}, function(response) {
alert("Error deleting this contact.");
console.log(response);
});
}
if you have service to manage your contact use there to call your server to delete the contact.
the reason you cannot delete without refresh is:
your delete from DB but not from angular array.
must review (update the scope (array))
your code is hard to read , i have suggestion for you, using:
broserfy , watchify
lodash
and backen use mvc
You delete it remotely but not locally. So you can see result only after refreshing (only after you requesting updated data from server). You need to update your local contacts after you succeed on server side.
$scope.deleteContact = function(contactId) {
Contacts.deleteContact(contactId).then(function(data){
...
//DELETE YOU LOCAL CONTACT HERE
...
$location.path("/");
});
}
I didn't look deeply into your code, so I can't say how exactly you should do it, but as I see you keep your local contacts in $scope.contacts in your ListController.

Wait for page redirect to evaluate `expect()` statement

So, I'm trying to script a login form for automation through protractor, but running into some problems when I'm trying to verify the cookies after the page redirect.
Here's my sample code:
describe('login', function () {
var app;
var LoginPage = require('./login.page.e2e.js');
// Before each test, refresh page
beforeEach(function () {
LoginPage.get();
app = element(by.css('body'));
});
// Check route, make sure it hasn't been redirected somewhere strange
it('should be at path: /login', function () {
expect(browser.getCurrentUrl()).toContain('/login');
});
/**
* Login as a provider (phoenix.e2e.login.test#leadingreach.com)
*/
it('should be able to login', function () {
// Fill out fields
LoginPage.populate_provider_form();
// Login as provider
// Clicking this button fires off an AJAX request that logs in the user, and populates a few browser cookies
element(by.css('#provider-login-form-container #login_btn')).click();
// These two statements work fine. They seem to wait for the redirect and end up passing.
expect(browser.getCurrentUrl()).toContain('/dashboard');
expect(app.evaluate('currentUser.username')).toEqual('phoenixe2elogin');
// The following statements are executed before the page redirects, and therefore fail
expect(!!browser.manage().getCookies().lrrt).toBe(true);
expect(!!browser.manage().getCookies().lrco).toBe(true);
expect(browser.manage().getCookies().lrrm).toBe('false');
});
});
It's been about 3 or 4 months since I created my first Protractor tests, so I'm re-learning all the new syntax, etc. I'm currently under the impression that using waitsFor and methods like that aren't really encouraged (or supported) anymore, so I'm wondering how someone could go about scripting something like this.
In order to get protractor to wait for the element to appear, you have to use the following syntax:
ptor.findElement(by.id('my-elt')).then(function (elt) {
expect(elt.evaluate('my.binding')).toBe('someValue');
});
Took me a while to figure this out, hope it ends up helping someone :D

angular $resource works with IIS express but not IIS ? I think something is wrong with the PUT?

I have isolated the problem down to a few lines. With IIS express it calls the PUT on the web API. When I switch to using IIS with the same code the call to the PUT method never happens.. The GET call works with both just fine.. any idea?
$scope.save = function (msa) {
$scope.msa = msa;
var id = this.msa.PlaceId;
Msa.update({ id: id }, $scope.msa, function () {
alert('finished update'); //only gets here with iis express
$scope.updatedItems.push(id);
$location.path('/');
});
}
MsaApp.factory('Msa', function ($resource) {
return $resource('/api/Place/:id', { id: '#id' }, { update: { method: 'PUT' } });
});
EDIT 1:
I thought it was working but now it only works when 'localhost' and not the computer name.. it is not calling the server method.. any ideas what things to look out for that make the site act differently from localhost to ? .. and even stranger.. the angular site wont load in IE.. but it loads in chrome
EDIT 2:
I think I have the answer.. The dewfault webapi PUT/UPDATE creates invalid code.. It sort of randomly would breaking at db.Entry(place).State = EntityState.Modified... I found code here that seems to fix it so far.. not exactly sure what it does though
An object with the same key already exists in the ObjectStateManager. The ObjectStateManager cannot track multiple objects with the same key
Remove WebDAV module from IIS, it should work
IIS does block some of the actions by default, I believe PUT is one (DELETE is another).
See: https://stackoverflow.com/a/12443578/1873485
Go to Handler Mappings in your IIS Manager. Find ExtensionlessUrlHandler-Integrated-4.0, double click it. Click Request Restrictions... button and on Verbs tab, add both DELETE and PUT.

Resources