发表于： 2019-12-21 21:12:14
1 1344
完成的事情：
后台登录和路由守卫
登陆模块
项目运行中，可以通过登陆来跳转到article页面，但是也可以避过登陆而使用直接输入url的方式进入article页面，这是十分不安全的。所以需要在每个页面判断当前状态是否为登陆状态
1.由于接口文档中没有返回参数token，所以我选择在login模块的login组件中存储登录账户名，通过判断账户名sessisonStorage来判断当前是否为登陆状态，还是避过登陆通过url直接跳转的
login() {
this.ser.postData(this.aaa).subscribe((res: any) => {
console.log(res)
if (res.code == 0) {
window.sessionStorage.setItem('auth_token', this.aaa.name);
this.rou.navigate(['/page']);
} else {
document.getElementById("addText").innerHTML = res.message;
}
})
}
2.由于在每个页面都需要确认“auth_token”是否存在，所以我选择新建一个service文件来存储判断方法，文件名：authguard.service.ts
引入CanActivate和Router文件，并初始化Router
import {
Injectable
} from '@angular/core';
import {
CanActivate,
Router
} from '@angular/router';
@Injectable({
providedIn: 'root',
})
export class AuthGuard implements CanActivate {
constructor(public router: Router) {}
canActivate() {
const token = window.sessionStorage.getItem('auth_token');
if (!token) { //判断token是否存在，如果不存在则跳转到登陆页面
this.router.navigate(['/login']);
return false;
}
return true;//判断token是否存在，如果存在则继续进行
}
}
3.之后在路由文件中进行配置，这里我只有login和page两个模块，而且是懒加载，所以在app路由中配置就行
首先引入service服务文件
import {AuthGuard} from './services/authguard.service';
然后配置需要跳转的page模块的路由守卫，如下红色加粗代码 (这里注意login模块本身不要配置路由守卫，否则会死循环)
const routes: Routes = [
{
path: 'login',
loadChildren: './modules/login/login.module#LoginModule'
},
{
path: 'page',
canActivate: [AuthGuard],
loadChildren: './modules/page/page.module#PageModule'
},
{
path: '',
redirectTo: 'login',
pathMatch: 'prefix'
}
];
4.最后在如下地方添加如下红色加粗代码
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [AuthGuard]
})
退出模块
1.退出文字/图标代码如下，如果使用a标签loginOut方法内必须加$event以及href="#"，原理尚不清楚，目的是为了清除自带的某种方法 <a href="#" (click)="loginOut($event)"><i nz-icon nzType="logout" nzTheme="outline" style="color:red;"></i></a>
2.在存放方法的service文件内定义如下方法
public loginOutUrl: string = "/a/logout" //退出系统
public requestHeader = {
headers: new HttpHeaders({
"Content-Type": "application/x-www-form-urlencoded"
})
}
cancel() {
return this.http.post(
this.loginOutUrl, this.requestHeader
)
}
3.在退出按钮所在的ts文件内引入Service以及Router模块并且初始化
import { ServiceService } from '../../services/service.service'
import { Router } from '@angular/router';
constructor( public ser: ServiceService,public rou: Router ) {}
定义如下方法，点击退出后清楚存储的用户名且跳转到login登录页面（ e以及ee.preventDefault( )结合$even是为了去除a标签内自带的某种方法 ）
loginOut(e) {
e.preventDefault();
this.ser.cancel().subscribe((res: any) => {
console.log(res)
if (res.code == 0) {
window.sessionStorage.removeItem("auth_token");
this.rou.navigate(['/login'])
}
})
}
返回列表
评论