Angular7路由守卫CanActivate中从服务器端判断登录状态

分手后的思念是犯贱 2022-01-31 05:04 236阅读 0赞

最初不知道怎么返回一个httpClient得到的的可观察对象，因为无法从subscribe中返回observable，后来自己new了一个Observable，然后在里面再去调用obserber.next()，解决了这个问题。

import {  Injectable } from '@angular/core';
    import {  ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, CanActivate, Router } from '@angular/router';
    import {  Observable, of } from 'rxjs';
    import {  AuthService } from '../auth.service';
    @Injectable({ 
      providedIn: 'root'
    })
    export class AuthGuard implements CanActivate { 
      constructor(private authService: AuthService, private router: Router) {  }
    
      canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean> { 
        let url: string = state.url;
    
        return this.checkLogin(url);
      }
    
      checkLogin(url: string): Observable<boolean> { 
        if (this.authService.isLogin) { 
          return of(true)
        }
        else { 
          var data = this.authService.checkLogin()
          //自己new一个可观察对象
          return new Observable<boolean>((obserber) => { 
            data.subscribe(d => { 
              if (d.Code === 1) { 
                obserber.next(true)
              } else { 
                obserber.next(false)
                this.router.navigateByUrl('/login');
              }
              obserber.complete();
            });
          })
        }
      }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，236人围观）

还没有评论，来说两句吧...

相关阅读

相关路由守卫登录例子

//main的js文件下面的页面 import Vue from 'vue' import App from './App.vue' ...

た入场券/ 2024年04月19日 12:26/ 0 赞/ 92 阅读

相关路由守卫

路由守卫][Link 1] - 监听整个项目的路由变化情况全局的前置守卫 - 监听某个路由的变化情况 ...

偏执的太偏执、/ 2024年04月19日 12:18/ 0 赞/ 111 阅读

相关 angular7使用路由守卫

供自己以后查阅 [https://www.jianshu.com/p/8d468bafa2f4][https_www.jianshu.com_p_8d468bafa2f4]

灰太狼/ 2022年12月17日 08:48/ 0 赞/ 159 阅读

相关 Vue路由守卫（全局路由守卫、路由独享守卫、组件内部守卫）

一、全局守卫（两种，在main.js文件下设置）第一种：router.beforeEach((to,from,next)=>\{\}) router.befo

た入场券/ 2022年11月26日 05:57/ 0 赞/ 477 阅读

相关 angular 未登录状态拦截路由跳转

使用angularjs的但页面应用时，由于是本地路由在控制页面跳转，但是有的时候我们需要判断用户是否登录来判断用户是否能进入界面。 angularjs是mvc架构所以实现起来

青旅半醒/ 2022年06月07日 05:13/ 0 赞/ 306 阅读

相关 (八)、Angular4.0 路由守卫

一、路由守卫作用 1. 只有当用户已经登录并拥有某些权限时才能进入某路由。 2. 一个由多个表单组件组成的向导，例如注册流程，用户只有在当前路由的组件中填写了满足要求的信

秒速五厘米/ 2022年05月28日 01:45/ 0 赞/ 270 阅读

相关路由守卫-vue切换路由登录判断、条件判断

在vue项目中，切换路由时肯定会碰到需要登录的路由，其原理就是在切换路径之前进行判断，你不可能进入页面再去判断有无登录重新定向到login，那样的话会导致页面已经渲染以及它的各

清疚/ 2022年05月17日 07:53/ 0 赞/ 340 阅读

相关 Angular路由守卫 canDeactivate （ng-zorro)

原文出处：[http://www.cnblogs.com/Lulus/p/9497870.html][http_www.cnblogs.com_Lulus_p_9497870.

梦里梦外;/ 2022年05月15日 14:04/ 0 赞/ 241 阅读

相关 angular7中路由守卫

路由守卫的作用，在做登录等权限验证的时候，需要用到路由守卫，辅助进行验证。比如：使用angular做的是单页应用，如果不用任何权限控制的话，就算使用了用户登录功能，假如我们

雨点打透心脏的1/2处/ 2022年02月17日 01:14/ 0 赞/ 277 阅读

相关 Angular7路由守卫CanActivate中从服务器端判断登录状态

最初不知道怎么返回一个httpClient得到的的可观察对象，因为无法从subscribe中返回observable，后来自己new了一个Observable，然后在里面再去调

分手后的思念是犯贱/ 2022年01月31日 05:04/ 0 赞/ 237 阅读