vue 登录与退出的实现

一、登录组件表单的数据绑定

1.为a-form-model加上 :model="form"属性进行数据绑定

在a-form-model表单上填写的数据自动同步到form对象上 :model="form"

在当前组件的行为区有data数据，在data数据里面设置一个form对象，即为表单的数据绑定对象

2.为每一个表单项的文本输入框通过v-model属性绑定form对象上具体的属性中

为了看到测试效果，我在这里先在form对象初始化一个值，用户在页面上可以看到以用户名和密码，但是密码一般是不直接显示出来的，因此要对密码做隐藏操作，直接给密码的输入框添加type="password"

                //这是登录表单的数据绑定对象
                form: {
                    username: 'admin',
                    password: '111111'
                },

最后看到的效果是这样的：

二、登录组件表单的数据验证

1.在a-form-model表单上添加 :rules="rules"

用户一离开输入框（鼠标失去售点时候）会有数据验证操作，看所输入的数据是否符合验证规则

2.在data中定义检验对象 

通过rules属性传入约定的规则

3.为a-form-model-item标签的prop属性设置为需要检验的字段名即可

三、登录组件登录前的预验证

当用户点击“登录”按钮的时候不是直接发起网络请求，而需要在发起网络请求之前对表单进行预验证，当验证通过之后才允许发起网络请求，否则提示用户表单数据不合法

1.为a-form-model-item添加ref属性

如何调用validate？要拿到表单的引用对象，通过Ref直接获取对应表单的引用，为a-form-model添加ref属性，其属性值是表单的一个引用对象。

为登录按钮绑定一个点击事件，点击事件的代码如下：

            //点击登录，绑定登录按钮的处理事件
            //进行表单的预验证
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    //如果valid值为false，则不发起网络请求
                    //valid为true，则发起网络请求
                    if (!valid) return
                    //这里开始发请求，去配置axios
                    this.getLoginIn(this)
                })
                // this.$router.push('/main')
            },

2.发起网络请求之前在main.js需要对axios包进行全局配置

可以通过axios.defaults.baseURL = '地址'配置请求的根路径 

// 导入axios
import axios from 'axios'
// 全局挂载axios
Vue.prototype.$axios = axios

继续写点击登录的事件，发起网络请求。一开始我这里发起请求不成功，甚至报错：Error: Request failed with status code 401，看了一下控制台发现接口报红，检查后发现是我的传入的参数有问题

解决参数的问题：

        引入import qs from 'qs'

        使用qs.stringify()

                onSubmit() {
                this.$refs.ruleForm.validate(async valid => {
                    //如果valid值为false，则不发起网络请求
                    //valid为true，则发起网络请求
                    if (!valid) return
                    //这里开始发请求，去配置axios
                    // this.getLoginIn(this)
                    let data1 = qs.stringify(this.form)
                    const { data: res } = await this.$axios.post('/jiangsu/login',data1)
                    console.log(res)
                    if(res.code !== 200) return console.log('登录失败')
                    console.log('登录成功')
                })
                // this.$router.push('/main')
            },

四、登录组件配置弹窗提示

使用的是组件库的Message全局提示，在main.js全局挂载，在当前页面使用时用this.$message启用即可

五、登录组件登录成功后的行为

一些思路：

1. 将登录成功之后的token保存到客户端的seesionStorage中，项目中除了登录之外的其他API接口，必须在登录之后才能访问，token只应当在当前网站打开期间有效，所以将token保存在seesionStorage中

window.sessionStorage.setItem("token",res.data.token)

 2. 通过编程式导航跳转到后台主页，路由地址是 /main

六、路由导航守卫控制访问权限

需求：当前/main内容区的页面只有在登录后的情况下才能允许访问，反之看不到main页面

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

代码位置写在router/index.js

七、退出功能实现原理 

基于token的方式实现退出比较简单，只需要销毁本地token即可，这样后续的请求就不会携带token，必须重新登录生成一个新的token之后才可以访问页面

代码示例：

用上方的方式我没有成功退出，重新换了一种方式（但是两种方法我今天又试了一遍，好像又都可以了，不知道是为什么，以上两个方法都可以使用）

      logout() {
        // 写死
        // window.sessionStorage.clear()
        // this.$router.push('./login')
        // 接口联调
        const _that = this
        _that.$confirm({
          title: '确定要退出系统吗?',
          okText: '确认',
          cancelText: '取消',
          onOk() {
            _that.$axios.post('/jiangsu/logout').then(res => {
                const { code } = res.data
                if (code === 200) {
                  window.sessionStorage.removeItem('tokenStr')
                  window.sessionStorage.removeItem('user')
                  _that.$router.replace('/login')
                }
              })
          },
          onCancel() {
            console.log('Cancel')
          }
        })
      }