angular基础+登陆+路由守卫的校验

最新推荐文章于 2024-02-07 21:48:01 发布

LLY-yy

最新推荐文章于 2024-02-07 21:48:01 发布

阅读量3.7k

点赞数 1

分类专栏：写写文章标签：新手求指教新手求指导新手找大神新手的路刚刚开始

本文链接：https://blog.csdn.net/qq_42666729/article/details/81108550

版权

写写专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Angular框架:
   1.历史:Angular起源于2009年Misko hevery和Adam Abrons两位在业余时间开发.当时Misko Hevery使用GetAngular重写了Google内部的Feedback项目,由原来的代码量17000行3周时间重构到1500行,之后正式立项,创建专职团队来开发和维护.
   Angularjs1.0.0于12年月正式推出,亮点在于功能基本齐全,如双向绑定,依赖注入,指令等.
   AngularJS1.3x放弃支持IE8浏览器,推出了单次绑定语法
   AngularJS1.5x增加类似组件式书写体验:主要视为过度Angular做铺垫.等等,其一直在迭代发展.
   AngularJS1.x的困境:
   当页面的数据过多会出现性能方面的问题.
   落后于当前Web发展理念:如组件开发方式等 .
   对手机端支持不够友好
   2014年9月下旬Angular2在NG-Europe大会上正式亮相.
   2.Angular2新特性:
       移除了controller+$dcope设计,改用组件式开发;
       性能更好:渲染更快,变化监测效率更高;
       优先为移动应用设计:Angular Mobile Toolkit
       更加贴合未来的标准如(ES6/7//WebComponent
       无缝升级方案:UpgradeAdapter: 推出了adapter适配器,加载在模板上下文当中,可以随时加入到组件中.并且在指令升级上,提供了支持版本识别.能够在angular1,和2之间识别.
   3.Angular2核心:组件,元数据,模板,数据绑定,服务,指令,依赖注入,模块. 组件(Components是最核心元素,其他核心为其提供服务.

    a.组件:层层嵌套形成组件树.每个组件独立完成各自的功能,可以各自定义自己的输入输出接口(javascript,html,css),可以上下之间交互.
生命周期:Constructor构造器初始化,>>OnChanges第一次触发数据变化,>>OnInit组件初始化,>>OnChanges运行期间触发数据变化,>>OnDestory组件销毁前等
   组件示例:
   import Component
   @Component({           //装饰器
       selector: 'hello',   //元数据
       template: '<p>{{greeting}}</p>'
   })

   export class HelloComponent{            //组件类
       private greeting: string;
       constructor(){
       this.greeting= 'Hello, Angular 2!';
       }
   }

   @Component装饰器:赋予一个类更丰富的数据
   数据绑定:
   {{greeting}}>>插值表达式
   属性绑定: [value] <input [value]="myData"/>
   事件绑定: <input (keyup)="handle($event)"/>
   属性绑定和事件绑定属于单向绑定
   双向绑定: <input [(ngModel)]="myData"/>
组件渲染: selector: 'a'>>能够匹配<a></a>标签而template模板中的'<p>{{greeting}}</p>'又能展现数据
:<hello><p>Hello,Angular 2!</p></hello>

父子组件之间也可以根据selector的标签来关联:
   Parent 组件包含son组件
   @Component({
   selector: 'son'
   template: '...'
   })
   export class SonComponent{
       @Input() data: Ison;
   }

   @Component({
   selector: 'son-list',
   template: '
   <ul>
       <li *ngFor="let a of A">
       <son [data]="a"></son>
       </li>
   </ul>
   '
   })
b.指令:属性指令:改变组件模板的外观或者行为,如样式等
     结构指令:改变组件模板的DOM结构,如nglf(内置指令)用来插入或者一处DOM节点
   组件继承于指令但是组件自身带有模板的指令

登陆部分:

准备:

a. 执行命令ng new dome --routing 创建一个带路由的项目.

b.在路由中分别建两个组件login和home :ng g component login 和home

c.在创建一个和home组件平级的文件夹auth,内部创建:new>TypeScripts file 起名叫:loginauth.ts,用来做路由守卫

项目如下:

具体思路:点击按钮登陆(click)="login",,[{ngMoodel}] 双向绑定,,传参到login.component.ts中,将参数转换成json对象:JSON.stringify,,将其放到sessionStorage中.setItem以键值对形式注入.路由跳转到成功页面:this.router.navigateByUrl('/home');

此过程中如果进行页面跳转需要路由守卫来验证,如果sessionStorage中有用户登陆则执行跳转到成功的home.html,反之跳转到login.html中.

具体细节注意:在login.component.ts中创建User类,定义相应的对象,给定构造方法,且初始化User对象.

具体代码:

第一步:登陆的页面:login.component.html:

<form>

</form>

第二步:登陆的后台:login.component.ts:

import { Component, OnInit } from '@angular/core';

import {Router} from '@angular/router';

export class User {

public uId: string;

public userName: string;

public upwd: string; }

@Component({

selector: 'app-login', t

emplateUrl: './login.component.html',

styleUrls: ['./login.component.css'] })

export class LoginComponent implements OnInit {

user: User;

constructor(public router: Router) {

this.user = {userName: '', upwd: '' , uId: ''}; }

ngOnInit() { } login() {

// 验证(后台请求 console.log('login()---------------');

alert(this.user.userName); const userStr: string = JSON.stringify(this.user);

sessionStorage.setItem( 'user', userStr ); this.router.navigateByUrl('/home'); } }

第三步:设置路由守卫:校验登陆

auth文件:loginauth.ts中:

///<reference path="../../../node_modules/@angular/compiler/src/core.d.ts"/>
import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';

import {User} from '../login/login.component';
import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';

@Injectable()
export  class LoginAuth implements  CanActivate {
  constructor(public  router: Router) {

  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    const userStr = sessionStorage.getItem('user');
    const user: User = JSON.parse(userStr);
    if (user && user.userName) {
      alert(user.userName);
      console.log('路由守卫验证通过!');
      alert('路由守卫验证通过!');
      return true;
    } else {
      console.log('路由守卫验证失败!');
      alert('路由守卫验证失败!');
      this.router.navigateByUrl('/login');
      return false;
    }
 }
}

第四步:登陆成功跳转到home.component.html中:

<a>登陆成功!</a>
<router-outlet></router-outlet>

期间还要设置的有:[(ngModel)] 双向绑定的设置:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { TestComponent } from './test/test.component';
import { LoginComponent } from './login/login.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {LoginAuth} from './auth/loginauth';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    TestComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,            //此处四条是[(ngModel)] 需要配置的条件
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule
  ],
  providers: [LoginAuth],   //这个加载的是路由守卫
  bootstrap: [AppComponent]
})
export class AppModule { }

第五步(应该是第一步,此处为大前提,来保证对应的组件之间能够正确跳转)):

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {LoginComponent} from './login/login.component';
import {HomeComponent} from './home/home.component';
import {LoginAuth} from './auth/loginauth';

const routes: Routes = [
  {path : '', redirectTo: '/home', pathMatch: 'full'},       //如果路径为空,则默认重定向到home中,但是会碰到路由守卫校验
  {path : 'login', component: LoginComponent},               //如果路径中为login,则跳到LoginComponent组件中
  {path : 'home', component: HomeComponent, canActivate: [LoginAuth]}, //如果路径中为home,则跳到HomeComponent组件中,   
                                                                       //此处的canActivate加入路由守卫:进入home前校验                      
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],     //路由+插座的定向
  exports: [RouterModule]
})
export class AppRoutingModule { }

LLY-yy

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
1
评论
angular基础+登陆+路由守卫的校验

Angular框架: 1.历史:Angular起源于2009年Misko hevery和Adam Abrons两位在业余时间开发.当时Misko Hevery使用GetAngular重写了Google内部的Feedback项目,由原来的代码量17000行3周时间重构到1500行,之后正式立项,创建专职团队来开发和维护. Angularjs1.0.0于12年月正式推出,亮点在于功能基...
复制链接

扫一扫