我收到并回答THIS我认为正确的问题，但我没有将值传播回视图。我已添加了许多console.logs，但它们没有被点击。
这是我的navMenu - 我想要＆＃34;登录＆＃34;如果它在localstorage中有值，则为true ...
<template bindable="router">
<require from="./navmenu.css"></require>
<div class="main-nav">
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/home">Jobsledger.API</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li repeat.for="row of router.navigation" class="${ row.isActive ? 'link-active' : '' }">
<a href.bind="row.href" if.bind="loggedIn">${ row.title }</a>
<a href.bind="row.href" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
if.bind="loggedIn">
${row.title}
<span class="caret"></span>
</a>
<ul if.bind="loggedIn" class="dropdown-menu">
<li repeat.for="menu of row.settings.nav">
<a href.bind="menu.href">${menu.title}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
test ${loggedIn}
</template>
以下是显示@computedFrom和getter的navmenu.ts视图模型：
import { autoinject, inject, NewInstance } from "aurelia-framework";
import { computedFrom } from "aurelia-binding";
import { bindable } from "aurelia-templating";
import { LoggedInService } from "../components/auth/LoggedInService";
@autoinject
export class Navmenu {
constructor(private testAuthentication: LoggedInService) {
console.log("loggedin value: ", this.testAuthentication.isAuthenticated())
}
@computedFrom('testAuthentication.authenticated')
get loggedIn() {
console.log("loggedin value: ", this.testAuthentication.isAuthenticated())
return this.testAuthentication.isAuthenticated()
}
}
这是我的loggedIn类 - 非常简单 - 关闭并在本地存储中获取值 - 如果不存在则返回false。
export class LoggedInService {
private LOGGED_IN = "loggedIn";
constructor() {}
isAuthenticated(): boolean {
var authenticated = localStorage.getItem(this.LOGGED_IN);
console.log("LOGGEDIN - typeof: ", authenticated);
if (authenticated != null) {
return true;
} else return false;
}
}
我的console.logs都没有显示在控制台中，这意味着这些功能都没有被击中..我不知道为什么......应该很简单..
有人可以看看这个，并指导我为什么还没有工作？
更新
我很欣赏杰里米看一眼，我已经开始实施这个了。这是我更新的课程。
我已经更改了课程上的名字，但它们代表了杰里米的建议。在这里，他们按照他提出的顺序......
以下是他的＆＃34; user.ts＆＃34;：
的版本 export class LoggedInService {
private LOGGED_IN = "loggedIn";
isLoggedIn: boolean = false;
userName: string = 'anonymous';
constructor() { }
isAuthenticated(): boolean {
var authenticated = localStorage.getItem(this.LOGGED_IN);
console.log("LOGGEDIN value HERE!: ", authenticated);
if (authenticated != null) {
return true;
} else {
return false;
}
}
}
我有＆＃34; isLoggedIn＆＃34;设为＆＃39; false＆＃39;和＆＃34;用户名＆＃34;设为匿名＆＃39;。
这是我的版本＆＃34; navmenu.ts＆＃34;：
import { autoinject } from "aurelia-framework";
import { bindable } from "aurelia-templating";
import { LoggedInService } from "../components/auth/LoggedInService";
@autoinject
export class Navmenu {
constructor(public loggedInService: LoggedInService) { }
}
我认为这应该给我的navmenu.html - 视图 - 访问这些值，在这里我不确定如何在if.bind中访问它们。我只是想用它来测试它：
<div if.bind="loggedInService.isLoggedIn">
working
</div>
这没有用。
最后这是我的auth_service.ts版本。这是获取登录的地方 - 我在fetch中设置了loggedIn和username的值：
constructor(
private login: userLogin,
private loggedinService: LoggedInService,
private tokenService: TokenService,
private userService: UserService,
private router: Router,
private http: HttpClient,
private controllerFactory: ValidationControllerFactory
) {
this.router = router;
this.controller = controllerFactory.createForCurrentScope();
this.controller.addRenderer(new BootstrapFormRenderer());
// Check if user is logged in
if (this.loggedinService.isAuthenticated()) {
loggedinService.isLoggedIn = true;
loggedinService.userName = this.userService.getUserName();
}
}
submitLogin() {
if (this.controller.validate()) {
// Lets do a fetch!
this.login.Username = this.username;
this.login.Password = this.password;
const task = fetch("/api/jwt", {
method: "POST",
body: JSON.stringify(this.login),
headers: new Headers({ 'content-type': 'application/json' })
})
.then(response => response.json())
.then(data => {
// First save the JWT and as well save it to loggedInService.
this.loggedinService.isLoggedIn = this.tokenService.saveJWT(data);
// Next go back to the api and get the username and save that to loggedInService also.
this.loggedinService.userName = this.userService.saveUserName();
// Finally redirect to home page.
this.router.navigate("home");
})
.catch(error => {
this.tokenService.clearJWT();
});
}
}
我仍然没有在navmenu视图中获得任何类型的活动..不确定我是否已设置此确定想知道是否有人可以再看看这个...也许我没有在导航栏视图中正确引用它。我注意到loggedInService是navmenu和login.ts视图模型中的依赖项。不管怎么说还是搞砸了......
答案 0 :(得分：1)
你可以稍微改变一下这个模型，并避免所有脏检查和计算的东西。
为当前用户创建模型：
user.ts
export class User {
isLoggedIn = false;
name = 'anonymous';
}
然后在需要访问isLoggedIn州或用户详细信息的视图模型中依赖用户：
navmenu.ts
@autoinject
export class Navmenu {
constructor(public user: User) { }
}
执行登录工作或本地存储工作的服务也依赖于当前用户，并在登录状态更改时更新其属性。
AUTH-service.ts
@autoinject
export class AuthService {
constructor(private user: User) {
if (... check local storage, etc ... ) {
user.isLoggedIn = true;
user.name = ....
}
}
login(username, password) {
return fetch('/api/login', { method: 'POST', body: { ... } })
.then(result => {
...
...
this.user.isLoggedIn = true;
this.user.name = username;
...
});
}
}
答案 1 :(得分：0)
这可能是因为你根本没有使用你的视图模型。如果您参考模块navmenu视图模型或其视图navmenu.html