测试数据库中只有之前记录温湿度及烟雾值的表中数据较多，在该数据库中增加AppUser表，用于登录用户身份查询，数据库表如下所示：

  项目中安装SqlSugarCore包，然后修改控制器类的登录函数及分页查询数据函数，将之前函数中的固定数据修改为从数据库中查询数据，并将分页查询数据函数中返回数据集合修改为返回环境检测数据的集合，主要调整的代码如下所示。客户端页面中的JavaScript代码主要修改了数据表格的列定义，在此不在列出来。

 [HttpPost]
 public async Task<ApiResult> Login([FromBody]UserInfo info)
 {
     try
     {
         if (_dbClient.Queryable<AppUser>().Any(r => (r.Account == info.Name) && (r.Password == info.Password)))
         {
             AppUser curUser = _dbClient.Queryable<AppUser>().First(r => (r.Account == info.Name) && (r.Password == info.Password));
             
             ApiResult result = new ApiResult();
             result.UserName = curUser.Name;
             result.Msg = GetToken(info.Name);
             return result;
         }
         else
         {
             return new ApiResult("身份验证失败", 500, false);
         }
     }
     catch(Exception ex)
     {
         return new ApiResult(ex.Message, 500, false);
     }
 }
 
[Authorize]
[HttpGet]
public async Task<ApiResult> GetDataByPage(int page,int limit)
{
    ApiResult result = new ApiResult();
    result.StatusCode = 0;

    Records data = new Records();
    data.Count=_dbClient.Queryable<EnvironmentRecord>().Count();            
    data.Data = _dbClient.Queryable<EnvironmentRecord>().ToPageList(Convert.ToInt32(page), limit).ToList();

    result.Data = data;
    return result;
}

  页面运行效果如下所示，唯一值得说的就是token的过期时间。用户登录并跳转到main.html页面后，如果重启后台服务的话，只要token没有过期，页面就可以接着调用后台服务接口，直至token过期为止，或者用户退出登录。所以确实像网上文章中提到的风险，存储到本地存储中很容易被取到并拿做它用。

参考文献：
[1]https://www.jianshu.com/p/a2804e72d296
[2]https://blog.csdn.net/sD7O95O/article/details/85043160
[3]https://www.cnblogs.com/qiongkangle/p/13347283.html
[4]https://www.cnblogs.com/xbhp/p/17401507.html
[5]https://www.cnblogs.com/superstar/p/16491428.html
[6]https://blog.csdn.net/weixin_44877917/article/details/140609294
[7]https://blog.csdn.net/qq_40287041/article/details/143368882