vue + Element UI实现后台管理系统登录过程的实现

短命女 2023-05-28 05:20 3阅读 0赞

#### 一、登录过程分析 ####

1.  在登录页面当中，引用`Element UI`中的`input`输入框，配置 `:model="loginForm"`，同时在列表项`input`输入框中结合`v-model`命令，`v-model="loginForm.username"`，实现双向数据绑定。对于`data`中的数据，也需要进行定义之前`model`所绑定的数据`loginForm`，这个也是录表单的数据绑定对象，在`loginForm`中定义具体的数据，比如`username`，这样在表单中通过`loginForm.username`拿到数据了。
2.  对于登录表单的校验，当离开选项框的时候，验证是否合法，需要配置 `:rules="loginFormRules"`，进行配置绑定校验规则。在`data`中的数据，定义`loginFormRules`，在里面配置校验规则，比如`username: []`，里面就是具体的规则项，验证用户名是否合法。
3.  当点击登录以后，通过`@click="login"`，触发登录事件，在`methods`中定义`login`函数，进行表单的预校验。如果预验证为`false`，那么就不发起请求。如果预验证为`true`，那么就发起登录请求。由于返回值是一个`promise`对象，异步的，所以可以结合`async`和`await`。通过状态码校验是否成功，如果成功，将登录成功之后的`token`，保存到客户端的`sessionStorage`。`token`只在当前网站打开期间生效，关闭网站之后不生效，所以`token`保存在`sessionStorage`中。通过编程式导航跳转到后台主页，路由地址是 `/home`。
4.  如果在登录页面中，需要进行重置，通过`@click="resetLoginForm"`，触发重置事件。点击重置按钮，重置登录表单，可以通过`Element UI`中自带的一个`resetFields()`方法进行重置字段，通过`ref`可以拿到表单对象，再取到表单的所有数据，进行清除。
5.  登录页面的完整代码 `login.vue`：

<template>
        <div class="login_container">
            <div class="login_box">
                
                <div class="avatar_box">
                    <img src="../assets/login.jpeg" alt="">
                </div>
                
                <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
                    
                    <el-form-item prop="username">
                        <el-input prefix-icon="iconfont icon-yonghu" v-model="loginForm.username"></el-input>
                    </el-form-item>
                    
                    <el-form-item prop="password">
                        <el-input prefix-icon="iconfont icon-icon_suo-" v-model="loginForm.password" type="password"></el-input>
                    </el-form-item>
                    
                    <el-form-item class="btns">
                        <el-button type="primary" @click="login">登录</el-button>
                        <el-button type="info" @click="resetLoginForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </template>
    
    <script> export default { data () { return { // 登录表单的数据绑定对象 loginForm: { username: 'admin', password: '123456' }, 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' } ] } } }, methods: { // 点击重置按钮，重置登录表单 resetLoginForm () { this.$refs.loginFormRef.resetFields() }, // 点击登录按钮，进行登录 login () { // 表单的预验证 this.$refs.loginFormRef.validate(async (valid) => { // console.log(valid) // 如果预验证为false，那么就不发起请求 if (!valid) return // 如果预验证为true，那么就发起登录请求 // console.log(result) //返回值为promise对象，用await和async，异步的 const { data: res} = await this.$http.post('login', this.loginForm) if (res.meta.status !== 200) return this.$message.error('登录失败') this.$message.success('登录成功') // console.log(res) // 将登录成功之后的token，保存到客户端的额sessionStorage // 项目当中除了登录之外的其它API接口，必须在登录之后才能够访问 // token只在当前网站打开期间生效，关闭网站之后不生效，所以token保存在sessionStorage中 window.sessionStorage.setItem('token', res.data.token) // 通过编程式导航跳转到后台主页，路由地址是 /home this.$router.push('/home') }) } } } </script>
    
    <style lang="less" scoped> .login_container { background-color: #2b4b6b; height: 100%; } .login_box { width: 450px; height: 300px; background-color: #fff; border-radius: 3px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); .avatar_box { width: 130px; height: 130px; border: 1px solid #eee; border-radius: 50%; padding: 10px; position: absolute; left: 50%; transform: translate(-50%, -50%); background-color: #fff; img { width: 100%; height: 100%; border-radius: 50%; background-color: #eee; } } } .login_form { position: absolute; bottom: 0; width: 100%; padding: 0 20px; box-sizing: border-box; } .btns { display: flex; justify-content: flex-end; } </style>

#### 二、登录的导航守卫拦截 ####

1.  对于登录的导航守卫，如果用户未登录，就想要访问管理系统的页面，应该是进行拦截的，只有登录以后才能够访问页面，可以使用`router.beforeEach()`这个方法，进行导航守卫的拦截。
2.  `router.beforeEach((to, from, next))`中有三个参数，`to` 将要访问的路径，`from` 代表从哪个路径跳转而来的，`next` 是一个函数表示放行。如果用户访问的是登录页，直接放行。如果访问的管理系统的页面，那么从`sessionStorage`中获取保存的`token`值。如果`token`的值不存在，强制跳转到登录页。存在`token`，那么就放行。
3.  路由页面的完整代码 **router.js**:

import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)
    
    const router = new Router({ 
      routes: [
        { 
          path: '/',
          redirect: '/login'
        },
        { 
          path: '/login',
          component: () => import('../components/Login.vue')
        },
        { 
          path: '/home',
          component: () => import('../components/Home.vue')
        }
      ]
    })
    
    // 挂载路由导航守卫
    router.beforeEach((to, from, next) => { 
      // to 将要访问的路径
      // from 代表从哪个路径跳转而来的
      // next 是一个函数，表示放行
      // next() 放行 next('/login) 强制跳转到登录页
      // 如果用户访问的是登录页，直接放行
      if (to.path === '/login') return next()
      // 从sessionStorage中获取保存的token值
      const tokenStr = window.sessionStorage.getItem('token')
      // 如果token的值不存在，强制跳转到登录页
      if (!tokenStr) return next('/login')
      // 存在token，那么就放行
      next()
    })
    
    export default router