Vue电商项目—登录/退出功能-03

Vue电商项目—登录/退出功能-03

1.1 登录概述

1.2 登录 — token 原理分析

1.3 登录功能实现

      <!-- 登录表单区域 -->
      <!-- ref="loginFormRef" 表单实例对象 :model 数据绑定 :rules 表单数据验证 -->
      <el-form  ref="loginFormRef"  label-width="0px"  class="login_form" :model="loginForm"  :rules="loginFormRules">
        <!-- 用户名 -->
        <!-- 通过prop 指定不同的验证规则 -->
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            prefix-icon="iconfont icon-user"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            prefix-icon="iconfont icon-3702mima"
          ></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>

      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          // required: true 必填 message 错误提示信息 trigger: 'blur' 当文本框失去焦点时
          { 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' }
        ]
      }

axios 挂载到 Vue 原型对象上

// 导入axios
import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/';
// 将axios挂载到 Vue原型对象上，其他地方，可通过this，$http方式调用
Vue.prototype.$http = axios

Message 消息提示，挂载到 Vue 原型对象上

// 全局挂载 Message 到 Vue的原型对象上，可通过this.$message使用
Vue.prototype.$message = Message;

    // 登录
    login() {
      // validate 对整个表单进行校验的方法，参数为一个回调函数。
      // 该回调函数会在校验结束后被调用
      // 并传入两个参数：是否校验成功和未通过校验的字段。
      // 若不传入回调函数，则会返回一个 promise
      this.$refs.loginFormRef.validate(async valid => {
        // 如果验证失败，拒绝发送请求
        if (!valid) return
        // 如果验证成功，发送Ajax请求
        // post请求，并携带 username,password
        // this.$http.post('login', this.loginForm) 返回一个 Promise对象
        // promise中的 data 存放实际的数据，通过 数据解构 方式，并重命名为 res
        const { data: res } = await this.$http.post('login', this.loginForm)
        //    通过判断data.meta.status
        if (res.meta.status !== 200) return this.$message.error('登录失败！')
        this.$message.success('登录成功！')
        // 1、将登录成功之后的 token, 保存到客户端的 sessionStorage
        // (1) 项目中出了登录之外的其他API接口，必须在登录之后才能访问
        // (2) token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage
        window.sessionStorage.setItem('token', res.data.token)
        // 2、通过编程式导航跳转到后台主页，路由地址是 /home
        this.$router.push('/home')
      })
    }

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

    // 退出登录
    logout() {
      // 1、先清除 sessionStorage中的token
      window.sessionStorage.clear()
      // 2、再跳转到 登录页面
      this.$router.push('/login')
    }