在deveco studio中使用AGC认证服务功实现（Login.ets） 实现用户登录逻辑。 用户登录失败，给出失败提示 用户登录成功，请用AppStorage保存登录当前登录的用户的实体信息 未登录成功的用户不能访问图书管理后台首页（利用AppStorage实现）

在Deveco Studio中使用AGC认证服务实现在ETS（Element UI模板）中实现登录功能，可以按照以下步骤操作：

1. **设置登录界面**[^1]:
- 创建一个表单组件，包括输入框（如邮箱/手机号）和密码输入框。

   <el-form :model="loginForm" ref="form" label-width="80px">
     <el-form-item prop="username">
       <el-input v-model.trim="loginForm.username"></el-input>
     </el-form-item>
     <el-form-item prop="password">
       <el-input type="password" v-model.trim="loginForm.password"></el-input>
     </el-form-item>
     <el-button @click="handleSubmit">登录</el-button>
   </el-form>

2. **登录逻辑处理**:

   handleSubmit() {
     const { username, password } = this.loginForm;
     auth.signInWithEmailAndPassword(username, password)
       .then(user => {
         this.$store.dispatch('setUser', user);
         AppStorage.saveUser(user); // 存储用户实体到AppStorage
         this.$router.push('/book-management'); // 跳转到图书管理页面
       })
       .catch(error => {
         this.errorMessage = error.message; // 登录失败显示错误消息
       });
   }

3. **权限控制**:
- 使用Vue Router守卫，在`beforeEach`中检查用户状态。

   router.beforeEach((to, from, next) => {
     if (to.name === 'book-management' && !AppStorage.getUser()) {
       next({ path: '/login', query: { redirect: to.fullPath } }); // 未登录跳转到登录页
     } else {
       next();
     }
   });

如果登录失败，会在`errorMessage`变量中存储错误提示信息；登录成功后，会通过`AppStorage`将用户实体信息保存起来，并允许访问图书管理页面。