发表于： 2020-05-29 18:23:51
1 2178
未完待续
今日完成
task10收尾工作完成
设置路由卫士，判断登录状态
任务打包上线
注册微信小程序，下载开发者工具
路由守卫 通过是否存在cookie值判断登录状态
import { Injectable, Inject } from "@angular/core";
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, NavigationStart } from "@angular/router";
@Injectable()
export class LoginGuard implements CanActivate {
constructor(private router: Router, ) {
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
let isLogin: boolean = false;
// 读取cookie
let cookies = document.cookie.split(";");
let isCookie: object = {};
if (cookies.length > 0) {
for (let cookie of cookies) {
if (cookie.indexOf('www.zonzii.com=') > -1) {
isLogin = true;
}
}
}
if (!isLogin) {
this.router.navigateByUrl('login');
}
return isLogin;
}
}
路由模块中导入守卫
import { LoginGuard } from "./guard/loginGuard"
const routes: Routes = [
{
path: '',
component: PagesComponent,
children: [
{
path: 'home',
component: HomeComponent,
data: {
title: '欢迎页'
}
},
{
path: 'article',
component: ArticleComponent
},
{
path: 'article/detail',
component: ArticleDetailComponent
},
]
, canActivate: [LoginGuard] //通过boolean值判断是否可以进入
},
{
path: 'login',
component: LoginComponent
},
{ path: '**', pathMatch: 'full', redirectTo: 'login' }
]
;
@NgModule({
// 初始化路由器 监听浏览器、地址变化
imports: [
RouterModule.forRoot(routes)
],
// 导出
exports: [RouterModule],
providers: [LoginGuard] //路由守卫守卫
})
粗略看了下小程序的文档，感觉跟之前学的有些差别，很不适应，需要多看看文档写demo适应下
返回列表
评论