今天完成的事情：
明天计划的事情：
遇到的问题：
收获：
1、路由守卫Canactive使用，创建一个Auth.guard.ts路由管理文件，引入CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private router: Router) {
}
// 路由守卫
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
return this.checkLogin();
}
checkLogin(): boolean {
// 判断本地有没有token
const token = sessionStorage.getItem('isLogin');
// 如果token有值，表示登录成功，继续跳转，否则跳转到首页
if (token == 'isLogin') { return true; }
this.router.navigate(['/login']);
return false;
}
}
这里使用H5 webstorm的sessionStorage也可以使用localStorage储存登录的token，之后在路由文件中引入路由管理文件，并在组件后加入canActivate:[AuthGuard]
import { AuthGuard } from '../../auth/auth.guard';
const routes: Routes = [
{
path:'home',component:HomeComponent,canActivate:[AuthGuard],
children:[
{path:'article',component:MyArticleComponent,canActivate:[AuthGuard]},
{path:'addarticle',component:AddarticleComponent,canActivate:[AuthGuard]},
{path:'welcome',component:WelcomeComponent,canActivate:[AuthGuard]},
]
}
];
如果进入某个路由的时候token存在，则可以进入路由，反之进入到登录组件中
2、ng bulid打包
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/carrot3",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
}
],
angular.json文件中可以配置打包
在package.json文件中
"build": "ng build --prod --optimization --progress --extractCss",
在ngbuild后面加入
--prod 作用是将打包的是生产环境的配置
--optimization作用是允许优化压缩资源
--progress作用是打包的时候提示进度
--extractCss作用是把css文件全部放在一个css文件中来打包
打包过程中同时也伴随着代码中的错误检查，有报错然后修改，最终生成在dist文件夹下的carrot3下
返回列表
评论