今天完成的事情
登陆模块的登陆状态以及退出模块的验证
登陆模块
项目运行中，可以通过登陆来跳转到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'])
}
})
}
今天遇到的问题
问题1：在配置路由守卫的过程中，将所有路由配置了路由守卫，如下，但是运行项目反复加载无法成功
const routes: Routes = [
{
path: 'login',
// canActivate: [AuthGuard], 这里不应该配置路由守卫
loadChildren: './modules/login/login.module#LoginModule'
},
{
path: 'page',
canActivate: [AuthGuard],
loadChildren: './modules/page/page.module#PageModule'
},
{
path: '',
// canActivate: [AuthGuard], 这里不应该配置路由守卫
redirectTo: 'login',
pathMatch: 'prefix'
}
];
解 决：首先要明白，只有在需要验证登陆状态的路由页面才需要配置路由守卫，在login登陆页面是不需要验证登陆状态的，如果配置路由守卫就会反正验证，然后反复失败，导致项目无法成功运行
问题2：在测试angular项目增删改查功能的时候，发现查询功能中时间查询选项有问题，在使用Date()对象中的gettime()方法后，我搜索所得到到的时间是动态改变的，比如我所搜11/4号的数据，理论上时间应该是截止到11/4 00：00,但是实际上获取到的是以上时间加上当前小时+分钟+秒的数据，导致我的搜索一直出问题，但是对比师兄的代码，我俩的一模一样，就是不知道哪里出了问题，最后还是让大佬教了一种不取当天实时时间的方法，如下：
let start = this.startDate ? transform(this.startDate) : '';
let end = this.endDate ? transform(this.endDate) + 86399999 : ''; // + 86399999才能搜索同一天的数据
function transform(a) {
return new Date((a).getFullYear() + '-' + ((a).getMonth() + 1) + '-' + (a).getDate()).valueOf();
}
以上取时间取到的是毫秒数，此方法可以封装起来，因为实际开发中经常会用到
今天的收获
1.学会了路由守卫的基本使用，完成了angular任务的登陆退出验证功能
2.学习了通过date()对象获取时间的方法，此方法以后会经常使用，建议封装起来
明天的计划
1.测试angular任务所有功能，继续找bug，改bug
2.完善之前写的angular后台项目管理系统中的增删改查自用教程
返回列表
评论