在Angular 6中,可以使用localStorage
来存储token,并在刷新后从localStorage
中获取token。以下是一个包含代码示例的解决方案:
localStorage
中:// 登录组件中
import { Component } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
token: string;
login() {
// 登录逻辑...
// 在登录成功后将token存储在localStorage中
localStorage.setItem('token', this.token);
}
}
app.component.ts
)中,通过订阅Router
的NavigationEnd
事件来监听路由的变化,并在每次路由变化时从localStorage
中获取token:// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit() {
// 监听路由变化
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
// 从localStorage中获取token
const token = localStorage.getItem('token');
// 在每次路由变化时处理token,可以发送到服务器进行验证等操作
console.log(token);
}
});
}
}
通过上述代码,每当路由发生变化时,都会从localStorage
中获取token,并可以进行相应的处理。请根据实际需求修改代码中的逻辑。