Angular 登录不工作后角度重定向到上一页

我已经尝试使用下面的解决方案在登录后将用户重定向到上一页，但它不会立即重定向到上一个url。它走“/”路线。当我点击F5刷新页面时，它最终转到之前捕获的state.url

这是我的

auth.guard.ts

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    let url: string = state.url;
    if (localStorage.getItem('isLoggedin')) {
        console.log("logged in");
        return true;
    } else {
        console.log('Could not authenticate');
        this.router.navigate(['/login'],{ queryParams : { 'redirectURL' : url }});
        return false;
    }
}

如何在登录后立即转到state.url

编辑：我在

console.log（“登录”）

输出之后添加了一个

console.log（路由）

，并且没有对象附加到

queryParams

属性。 我希望看到

重定向URL

附件

---

使用

route.snapshot.paramMap.get（'previousUrl'）

试着这样做：

canActivate(route: ActivatedRoute, state: RouterStateSnapshot) {
    let url: string = route.snapshot.paramMap.get('previousUrl');
    if (localStorage.getItem('isLoggedin')) {
        console.log("logged in");
        return true;
    } else {
        console.log('Could not authenticate');
        this.router.navigate(['/login'],{ queryParams : { 'redirectURL' : url }});
        return false;
    }
}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    let url: string = state.url;

    if (localStorage.getItem('isLoggedin')) {
        return true;
    } else {
        localStorage.setItem('redirectToPage', '' + url);
        this.router.navigate(['/login']);
        return false;
    }
}

使用
route.snapshot.paramMap.get（'previousUrl'）

试着这样做：

canActivate(route: ActivatedRoute, state: RouterStateSnapshot) {
    let url: string = route.snapshot.paramMap.get('previousUrl');
    if (localStorage.getItem('isLoggedin')) {
        console.log("logged in");
        return true;
    } else {
        console.log('Could not authenticate');
        this.router.navigate(['/login'],{ queryParams : { 'redirectURL' : url }});
        return false;
    }
}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    let url: string = state.url;

    if (localStorage.getItem('isLoggedin')) {
        return true;
    } else {
        localStorage.setItem('redirectToPage', '' + url);
        this.router.navigate(['/login']);
        return false;
    }
}

试试这个：

您可以在登录之前发送URL，并按如下方式使用它

@Component({ ... })
class SomePageComponent {
  constructor(private route: ActivatedRoute, private router: Router) {}
  checkLogin() {
    if (!this.auth.loggedIn()) {
      this.router.navigate(['/login`], { queryParams: { redirectTo: this.route.snapshot.url } });
    }
  }
}

因此，在登录组件中，您可以像这样访问queryParams

@Component({...})
class LoginComponent {
  constructor(private router: Router, private route: ActivatedRoute) {}

  backToPreviousPage() {
    this.router.navigate([this.route.snapshot.queryParam.get('redirectTo')]);
  }
}

试试这个：

您可以在登录之前发送URL，并按如下方式使用它

@Component({ ... })
class SomePageComponent {
  constructor(private route: ActivatedRoute, private router: Router) {}
  checkLogin() {
    if (!this.auth.loggedIn()) {
      this.router.navigate(['/login`], { queryParams: { redirectTo: this.route.snapshot.url } });
    }
  }
}

因此，在登录组件中，您可以像这样访问queryParams

@Component({...})
class LoginComponent {
  constructor(private router: Router, private route: ActivatedRoute) {}

  backToPreviousPage() {
    this.router.navigate([this.route.snapshot.queryParam.get('redirectTo')]);
  }
}

通过添加cookie来存储以前的URL解决了此问题。
所以
canActive@auth.guard.ts
结果如下：

canActivate(route: ActivatedRoute, state: RouterStateSnapshot) {
    let url: string = route.snapshot.paramMap.get('previousUrl');
    if (localStorage.getItem('isLoggedin')) {
        console.log("logged in");
        return true;
    } else {
        console.log('Could not authenticate');
        this.router.navigate(['/login'],{ queryParams : { 'redirectURL' : url }});
        return false;
    }
}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    let url: string = state.url;

    if (localStorage.getItem('isLoggedin')) {
        return true;
    } else {
        localStorage.setItem('redirectToPage', '' + url);
        this.router.navigate(['/login']);
        return false;
    }
}

下一步，将此添加到layout.component.ts

let redir = localStorage.getItem('redirectToPage');
if(redir.includes("mypath/")){
    this.router.navigate([redir]);
} else {
    this.router.navigate(['/homepage']);
}

进入请求的页面后，我从
localStorage
中删除了
redirectToPage
，通过添加cookie来存储以前的URL解决了这个问题。
所以
canActive@auth.guard.ts
结果如下：

canActivate(route: ActivatedRoute, state: RouterStateSnapshot) {
    let url: string = route.snapshot.paramMap.get('previousUrl');
    if (localStorage.getItem('isLoggedin')) {
        console.log("logged in");
        return true;
    } else {
        console.log('Could not authenticate');
        this.router.navigate(['/login'],{ queryParams : { 'redirectURL' : url }});
        return false;
    }
}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    let url: string = state.url;

    if (localStorage.getItem('isLoggedin')) {
        return true;
    } else {
        localStorage.setItem('redirectToPage', '' + url);
        this.router.navigate(['/login']);
        return false;
    }
}

下一步，将此添加到layout.component.ts

let redir = localStorage.getItem('redirectToPage');
if(redir.includes("mypath/")){
    this.router.navigate([redir]);
} else {
    this.router.navigate(['/homepage']);
}

进入请求页面后，我从
localStorage
中删除了
redirectToPage
为什么不使用？顺便说一句：您可以通过查询url在LoginComponent中编写另一个导航。@Numichi我使用auth.guard.ts，因为这是我在internet上搜索时发现的最常见的解决方案，所以决定尝试一下。为什么不使用？顺便说一句：您可以通过查询url在LoginComponent中编写另一个navigate。@Numichi我使用auth.guard.ts，因为这是我在internet上搜索时发现的最常见的解决方案，所以决定尝试一下。在使用route.snapshot.paramMap.get时，我得到一个“属性“snapshot”不存在于类型“ActivatedRouteSnapshot”上（'previousUrl'）检查修改后的答案。
route:ActivatedRoute
现在它告诉我它不是canActivate的正确实现。错误是：类型'ActivatedRouteSnapshot'中缺少属性'snapshot'，但类型'ActivatedRoute'中需要属性'snapshot'。我使用的角度版本是5。我得到一个使用route.snapshot.paramMap.get（'previousUrl'）时，“ActivatedRouteSnapshot'类型上不存在属性'snapshot'检查修改后的答案。
route:ActivatedRoute
现在它告诉我它不是canActivate的正确实现。错误说明：类型“ActivatedRouteSnapshot”中缺少属性“snapshot”，但类型“ActivatedRoute”中需要属性“snapshot”。我使用的角度版本是5。