之前我们是通过前端自动生成的token信息，这次我们通过注册登录，保存到本地去实现。首先，我们实现一个登录页面，放在templates目录下。

                    
     
     
     登录 
    

我们在后端去编写一个返回静态文件的页面，一个返回token的方法

def get_user_by_email(db: Session, email: str):     user = db.query(User).filter(User.email == email).first()     if not user:         raise HTTPException(status_code=404, detail="this email not exists")     return user    @app.get("/login") async def login(request: Request):     return templates.TemplateResponse(         "login.html",         {             "request": request         }     )   @app.post("/token") def generate_token(         user: UserModel,         db: Session = Depends(create_db) ):     db_user = get_user_by_email(db, user.email)     client_hash_password = user.password + "_hashed"     if client_hash_password == db_user.hashed_password:         return {"token": "lc-token-value", "msg": "success"}     return {"token": None, "msg": "failed"}

然后我们可以去启动下，当我们启动完成登录后发现本地存了token，那么这个时候我们需要改造下webchat.html，我们取本地的 token，同时也实现了一个退出的功能。

          
WebSocket 聊天
 
          Send 
 退出 
 
      

 这样我们就可以登录后，然后去获取登录产生的token，然后和后端发发送消息，这样我们完成了一个登录聊天，退出后无法聊天的功能。我们如果直接访问聊天的页面，也是可以直接去定向到我们的登录的界面呢，我们的聊天是依赖于我们的登录的。

成功后才可以发送聊天内容

点击退出，直接退出回到登录页

本地存储也清空了