Node.js登录API对接前端TS文件按角色跳转路由问题求助

• 后端登录接口返回的响应数据中未返回role字段，前端读取result.role值为undefined，admin和employee的判断条件都不满足，所以只会触发alert提示，不会执行跳转逻辑。
• 前端未先校验接口返回的success状态，异常场景判断逻辑不严谨。
• localStorage存储的key包含空格不符合规范，后续读取时容易出错。

1. 修改后端接口代码 #

在admin和普通用户的返回JSON中新增role字段，把用户角色透传给前端：

login: (req, res ) =>{
    const body = req.body;
    getUserByUserEmail(body.email, (err, results) => {
        if(err) {
            console.log(err);
            return res.json({
                success : 0 ,
                message : "服务端错误"
            });
        }
        if(!results) {
            return res.json({
                success : 0 ,
                message : "Invalid Email or Password"
            });
        }

        const result = compareSync( body.password, results[0].password);
        if (result) {
            results[0].password = "";
            const jsontoken = sign({ result: results }, "qwe123", {expiresIn : "3h"});
            // Admin part
            if(results[0].role=='admin')
            {
                        return res.json({
                            success : 1 ,
                            message : "You are Successfully logged in as admin!",
                            token : jsontoken,
                            role: results[0].role // 新增返回role字段
                        });
            }
            // Employee part
            else {
               
            return res.json({
                            success : 1 ,
                            message : "You are Successfully logged in as user!",
                            token : jsontoken,
                            role: results[0].role // 新增返回role字段
                        });
            }

         }
        else{
            return res.json({
                success : 0 ,
                message : "Invalid Email or Password"
            });
        }
  
    });
}

*注意：如果你的数据库中普通用户的role字段值为user，需要把前端的result.role=='employee'的判断条件改成result.role=='user'，保持前后端字段值一致即可。

2. 修改前端TS代码 #

先校验登录成功状态，再处理跳转逻辑，优化localStorage存储key：

onSubmit() {
    if(this.form.valid){
      this.userdataService.login(this.form.value).subscribe(result=>{
        // 先判断登录是否成功
        if(result.success === 1){
          localStorage.setItem('token',result.token);
          if(result.role=='admin'){
            this.router.navigateByUrl('/employee-list');
          }else if(result.role=='employee'){ // 和后端返回的普通用户role值保持一致
            this.router.navigateByUrl('/log-Page');
          }else{
            alert('未知用户角色');
          }
        }else{
          alert(result.message);
        }
      });
    }
}

内容的提问来源于stack exchange，提问作者Malik Tahir