我试图找出如何让菜单显示和消失基于在以前的帖子中登录.但我认为一个更好也可能更容易的问题是,如何观察本地存储的变化？
我在本地存储中使用json web令牌进行身份验证,我很乐意看到对localStorage的更改,然后重新更新我对新信息的看法.
我用这个设置了localStorage
localStorage.setItem('jwt', my_token);
我想做的事情是检查我是否有令牌,如果我什么都没有发生,但是当发生变化时会发生事件.如果我只能观察像localStorage.getItem('jwt')这样的命名事件,我会特别喜欢它.
谢谢!
编辑:
Gunter指出了我正确的方向,但万一有人仍然相当困惑,这里有一个吸引人向你展示如何做到这一点. http://plnkr.co/edit/TiUasGdutCsll1nI6USC?p=preview
因此,我尝试使用JSON Web令牌进行身份验证,并且正在努力弄清楚如何将它们附加到标头并根据请求发送它们.
我试图使用https://github.com/auth0/angular2-jwt,但我无法使用Angular并放弃,并认为我可以弄清楚如何在每个请求中发送JWT或发送它在标题中(最好是标题).它比我想象的要困难一点.
这是我的登录
submitLogin(username, password){
console.log(username);
console.log(password);
let body = {username, password};
this._loginService.authenticate(body).subscribe(
response => {
console.log(response);
localStorage.setItem('jwt', response);
this.router.navigate(['UserList']);
}
);
}
和我的login.service
authenticate(form_body){
return this.http.post('/login', JSON.stringify(form_body), {headers: headers})
.map((response => response.json()));
}
我知道这些并不是真的需要,但也许它会有所帮助!一旦这个令牌被创建并存储它,我想做两件事,在标题中发送它并提取我用它放入的过期日期.
一些Node.js登录代码
var jwt = require('jsonwebtoken');
function createToken(user) {
return jwt.sign(user, "SUPER-SECRET", { expiresIn: 60*5 });
}
现在我只是尝试通过角度服务将其传递回使用此服务的节点.
getUsers(jwt){
headers.append('Authorization', jwt);
return this.http.get('/api/users/', {headers: headers})
.map((response => response.json().data));
}
JWT是我在本地存储中的webtoken,我通过我的组件传递给服务.
我没有任何错误,但当它到达我的节点服务器时,我从来没有在标头中收到它.
'content-type': 'application/json',
accept: '*/*',
referer: 'http://localhost:3000/',
'accept-encoding': 'gzip, deflate, sdch',
'accept-language': 'en-US,en;q=0.8', …所以我昨天回答了一个问题,我觉得我在复制代码并且没有完全理解我在做什么,直到我开始深入了解Observables.我的问题是我总是在应用和查找文档以满足我的需求时遇到了一些困难.这意味着我仍然非常依赖于了解其他人如何使用代码,因此我可以更好地掌握这些概念.
我花了大部分时间在相当优秀的文档中阅读这篇文章https://github.com/Reactive-Extensions/RxJS/tree/master/doc
我开始理解可观察者对承诺的想法和力量.到目前为止,我有三个问题;
我的其他问题确实涉及如何在我的代码中更有效地使用它们.
我将为接下来几个问题发布我的代码
@Component({
selector: 'my-app',
providers: [FORM_PROVIDERS, RoleService, UserService],
inputs: ['loggedIn'],
directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES, LoggedInRouterOutlet],
template: `<body>
<div *ngIf="loggedIn[0]=== 'true'">
<nav class="navbar navbar-inverse navbar-top" role="navigation">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class = "nav navbar-nav">
<li>
<a [routerLink] = "['/RolesList']">Roles</a>
</li>
<li>
<a [routerLink] = "['/UserList']">Users</a>
</li>
<li>
<a [routerLink] = "['/UserRolesList']">User Roles</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a [routerLink] = "['/Login']" (click)="logout()">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<router-outlet></router-outlet>
</div> …我已经尝试了一切我能想到的事情,当一个复选框改变状态但是我似乎无法让它工作时触发事件.
这是html
<div *ngIf="role?.ACTIVE_FLAG === 'Y'">
<div class="label"> Active Record </div>
<input type="checkbox" (click)="toggleRoleActive()" checked>
</div>
<div *ngIf="role?.ACTIVE_FLAG === 'N'">
<div class="label"> Active Record </div>
<input type="checkbox" (click)="toggleRoleActive()">
</div>
这是toggleRoleActive()
编辑:
toggleRoleActive(){
if(this.role_submit.ACTIVE_FLAG === 'Y'){
this.role_submit.ACTIVE_FLAG = 'N';
}else {
this.role_submit.ACTIVE_FLAG = 'Y';
}
}
我面临的挑战之一是,当我从服务器获取数据时,需要检查或不检查按钮.但是,如果他们想要停用或重新激活我希望它回复该复选框的角色.
我已经尝试使用[(ngModel)],(change)以及更简单的解决方案,但是已经触发任何事件都是唯一的事情[(ngModel)]做,但这样我结束了true/ false而不是'Y'/ 'N'.此外,如果我使用[(ngModel)],无论我的服务器发送什么数据,复选框始终都标记为已选中.
我有一些路线,但是当点击某些路线时,react-dom不会重新渲染.以下是我的路线的外观:
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="/about" component={About}/>
<Route path="/chat" component={Chat}>
<Route path="/chat/:chat_room" component={Chat_Room}/>
</Route>
<Route path="/login" component={Login}/>
</Route>
这是我的/chat组件:
export default React.createClass({
loadChatRoomsFromServer: function() {
$.ajax({
url: '/chat_rooms',
dataType: 'json',
cache: false,
success: function(data) {
this.setState(data);
}.bind(this),
error: function(xhr, status, err) {
console.error('/chat_rooms', status, err.toString());
}.bind(this)
});
},
getInitialState: function(){
return {chat_rooms: []};
},
componentDidMount: function() {
this.loadChatRoomsFromServer();
},
render: function() {
var chat_nav_links = this.state.chat_rooms.map(function(rooms, i){
return (
<div key={i}>
<li><NavLink to={"/chat/" + rooms.name}>{rooms.name}</NavLink></li>
</div> …