javascript - 如何获取经过身份验证的用户的数据/id?

标签 javascript angular typescript ionic-framework ionic4

我正在努力解决一个问题,即我的代码应该如何知道哪些是经过身份验证的用户的数据或如何获取该数据。

我已经完成了我的身份验证流程,这意味着我可以成功注册并使用 token 登录。我仍然通过刷新页面登录,我的 token 仍然存储在 ionic/storage 中。

我认为这实际上应该足以获取用户经过身份验证的数据的特定用户数据/权限。但我不知道该怎么做。

当我从列表中获取任何用户并查看他的个人资料时,我只需传递他的 ID 即可。如何通过单击个人资料选项卡来获取经过身份验证的用户的 ID?

我不是来自可以获取 ID 的其他页面。我还放置了我的 auth.service 代码,如果这对您有帮助,以便因为 token 而帮助我,但重要的是最后两个片段(我认为是这样)。

这是我的代码:

auth.service.ts

 private token = null;
  user = null;
  authenticationState = new BehaviorSubject(false);



  constructor(private http: HttpClient, private alertCtrl: AlertController, private storage: Storage, private helper: JwtHelperService,
              private plt: Platform) {
    this.plt.ready().then(() => {
      this.checkToken();
    });
   }

   checkToken() {
       this.storage.get(TOKEN_KEY).then(access => {
           if (access) {
               this.user = this.helper.decodeToken(access);
               this.authenticationState.next(true);
           }
       });
   }

   apilogin(username: string, password: string) {
    return this.http.post<any>(`${this.url}/api/token/`, { username, password })
    .pipe(
        tap(res => {
            this.storage.set(TOKEN_KEY, res['access']);
            this.storage.set(USERNAME_KEY, username);
            this.user = this.helper.decodeToken(res['access']);
            console.log('my user: ', this.user);
            this.authenticationState.next(true);
        }),
        catchError(e => {
            this.showAlert('Oops smth went wrong!');
            throw new Error(e);
        }));
}

user.service.ts

  // get a user's profile
  getUserDetails(id: number): Observable<any> {
    return this.http.get(`${this.url}/users/${id}/`);
  }

profile.ts

 information = null;
 id: number;


      ngOnInit() {
        // How to get just the authenticated api?
        this.activatedRoute.paramMap.subscribe(params => { 
         this.id = validateId(params.get('id'));
     });

        function validateId(id: any): number {
           return parseInt(id);
    }

     // Get the information from the API
    this.userService.getUserDetails(this.id).subscribe(result => {
      this.information = result;
     });
   }

最佳答案

更新答案 您需要将您的user_id保存到存储中,如下所示

this.storage.set(USER_ID, this.validateId(res['user_id']))

并在当前用户配置文件组件中获取此user_id并将其传递给this.userService.getUserDetails方法,例如:

const currentUserId = this.storage.get(USER_ID); 

this.userService.getUserDetails(currentUserId).subscribe(user => { 
  console.log('user data', user);
});

旧答案 假设任何用户的个人资料位于同一路由(例如:profile/:userId),包括当前经过身份验证的用户

您只需将此调用添加到 activatedRoute.paramMap 的订阅中,

尝试

ngOnInit() {
  // How to get just the authenticated api?
  this.activatedRoute.paramMap.subscribe(params => { 
    this.id = validateId(params.get('id'));

    // Get the information from the API
    this.userService.getUserDetails(this.id).subscribe(result => {
      this.information = result;
    });
  });

  function validateId(id: any): number {
    return parseInt(id);
  }
}

让我解释一下发生了什么,当你进入这个组件时,ngOnInit钩子(Hook)被调用并通过id获取用户,并且在你尝试打开当前经过身份验证的用户后,只有的回调activateRoute.paramMap 订阅并非全部调用 ngOnInit 方法。

关于javascript - 如何获取经过身份验证的用户的数据/id?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58804564/

相关文章:

javascript - 使用 Oracle ADF 时,如何设法检测特定输入文本上按下的按键

angular - 类错误地实现了接口(interface) 'OnChanges' 。类型中缺少属性 'ngOnChanges'

html - 在 Angular 2 和 Typescript 的数组中定义数组

css - 在一个 Angular 应用程序中动态切换两个 styles.css 文件

javascript - TypeScript 中的条件类型

typescript 接口(interface)动态参数不编译没有任何

javascript - RxJS 先 take 然后 throttle 等待

javascript - 检测图像何时加载

javascript - Firefox 中未定义 Jquery

angular - 检测 Angular 形式(非响应式)中的数据是否已更改