From what I understand from your question, it looks like you are displaying some information to the client via the interface, but the returned JSON is showing more than it should!
I work with Angular on systems that have public access and at the same time, internally, with access control.
What I do to avoid any kind of exposure problem is to return exactly what the user can see in each situation.
Taking a didactic example, using the Laravel framework, I create routes that return something to the end user that has public access, something else for the client, and something else for the administrator.
Example:
// Só o admin acessa, ele poderá ver tudo
Route::get('/usuarios/ajax-listar-controle-acesso', function () {
return Usuario::all();
});
// Clientes autenticados acessam, ele pode ver alguns dados
Route::get('/usuarios/ajax-consulta', function () {
return Usuario::select('id', 'telefone', 'nome', 'email')->get();
});
// Acesso público, informações limitadas para evitar exposições indevidas
Route::get('/usuarios/ajax-consulta-web', function() {
return Usuario::select('id', 'nome')->get();
});
At the end of the day the concern is not the data being exposed in the browser, but rather how and who to expose.
If you want to control what can be returned to the browser, make the logic in the Backend for this.
The security in this case is not fortunate that the end user does not see a sensitive data because he does not know how to access the developer tool, but you do not want to see the data as needed and authorization.