Vue项目练习--电商后台管理系统的功能---登录页面模块

Vue项目练习--电商后台管理系统的功能---登录页面

电商后台管理系统项目预览：

 

用户登录--用户在登录页面输入用户名和密码后调用后台接口进行验证，通过验证之后，根据后台的响应状态跳转到项目主页

这里使用token令牌的方式来维持登录状态，原因如下：

 

• 因为HTTP协议有无状态的特点
• 通过 cookie 在客户端记录状态
• 通过 session 在服务器端记录状态
• 通过 token 方式维持状态

 

如果前端与后台接口之间不存在跨域问题，那么推荐使用cookie和session来记录登录状态。

如果前端与服务器接口之间存在跨域问题，那么就要使用token的方式来维持登录状态。

 

1.用户登录页面的布局，这里通过 Element-UI 组件实现布局：

 

 

 

 

 

 

 

 

 

 

 

• el-form
• el-form-item
• el-input
• el-button
• 阿里字体图标库

2.给登录表单进行数据绑定

　　2.1 给el-form添加:model属性绑定，指向一个数据对象；

　　2.2 为每一个表单项通过v-model绑定到数据对象上对应的属性中

 

 

 

 

 

 3.给表单项添加数据验证的行为

　　3.1 要为el-form添加:rules属性绑定，指向一个表单验证规则对象

　　3.2 给每个el-form-item项指定一个prop属性，值为rules中的一个具体验证规则

 

 

 

 4.实现表单重置功能

　　4.1 获取到表单的实例对象，通过实例对象直接访问resetField函数，从而重置整个表单

 

 

如何才能拿到这个表单的实例对象呢？给el-form组件添加一个ref的引用，引用名称可以任意取，只要合法就行。

 

 

 

只要获取到LoginFormRef，就能拿到该表单的实例对象。可以直接通过LoginFormRef调用resetField函数来重置表单。

通过this.$refs可以直接获取到表单的引用对象，这个引用对象就是表单组件的实例对象

 

 

 5.实现登录

• 通过 axios 调用登录验证接口
• 登录成功之后保持用户 token 信息
• 跳转到项目主页

注意，发送axios请求时，必须打开MySQL数据库，并且运行后端服务器接口的项目！！！

如果某个方法的返回值是promise对象，需要使用.then()的方式来获取返回的结果，则可以使用async/await来简化对promise的操作。

注意，await只能用在被async修饰的方法中，所以需要在紧挨着await的方法修饰为一个异步的async方法。

 

 

 

 

 

6.路由导航守卫控制访问权限

如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。

 

 

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行
  // next()  放行    next('/login')  强制跳转
  if (to.path === '/login') return next()
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next() 
})

7.基于 Element-UI 进行表单验证 

点击登录按钮后，通过调用表单的某个函数来进行预验证。

 

 

 

login () {
　　 // 进行表单验证
    this.$refs.LoginFormRef.validate(async valid => {
　　　 // 如果验证失败，则直接退出后续代码的执行
       if (!valid) return
        // el-form中所填写的数据都会自动同步到loginForm中
        // axios返回的结果中的data属性才是我们真正需要的数据，使用解构赋值的方式将data解构出来
        const { data: res } = await this.$http.post('login', this.loginForm)
        // 返回的结果是一个promise对象，使用async/await后返回的是一个具体的响应对象
        // console.log(res)
        if (res.meta.status !== 200) return this.$message.error('登录失败！')
        this.$message.success('登录成功！')
        // 1. 将登录成功之后的token保存到客户端的sessionStorage中
        // 因为localStorage是持久化的存储机制，而sessionStorage是会话期间的存储机制
        //   1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问
        //   1.2 token只应在当前网站打开期间生效，所以token保存在sessionStorage中
        window.sessionStorage.setItem('token', res.data.token)
        // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
        this.$router.push('/home')
    })
}

 

// 这是登录表单的验证规则对象
LoginFormRules: {
    // 验证用户名是否合法
    username: [
        { required: true, message: '请输入登录名称', trigger: 'blur' },
        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
    ],
    // 验证密码是否合法
    password: [
        { required: true, message: '请输入登录密码', trigger: 'blur' },
        { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
    ]
}

8.退出功能实现原理

 

 

 

 

// 清空token
window.sessionStorage.clear()
// 跳转到登录页
this.$router.push('/login')