表单登录~跳转

实现登录

实现登录前表单数据的预验证

1.给表单登录事件

 <el-button type="primary" size="medium" @click="login">登录el-button> 

2.点击事件方法

 login() {
      // 登录的预先验证
      this.$refs.ruleForm.validate(isOK => {
        console.log(isOK)
      })
    }

配置axios发起登录请求

1.先看登录接口
2.准备工作
启动mysql

启动api接口后台

需要用到axios，所以导入axios

// 导入axios请求
import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'https://www.liulongbin.top:8888/api/private/v1/'
// 给Vue原形添加一个属性$http为axios对象
Vue.prototype.$http = axios

发起请求

配置Message全局弹框组件

导入Message

• 这个Message不是组件，所以不用use
• 而是需要挂载到Vue的原型上，这样可以在任意组件中通过this访问
  
  Message使用
  

回车登陆功能

回车登录： @keyup.enter.native=“login”

<el-form-item prop="password">
          
          
          <el-input
            @keyup.enter.native="login"
            prefix-icon="iconfont icon-3702mima"
            v-model="ruleForm.password"
            type="password"
          >
          el-input>
el-form-item>

完善登录之后的操作

操作步骤

1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
   1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问
   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中(记得用小写w-----window)
2. 通过编程式导航跳转到后台主页，路由地址是 /home
   
   跳转到home得有组件
   新建组件
   
   分配路由
   

路由导航守卫控制页面访问权限

为什么要用导航守卫

路由导航守卫控制页面访问权限

to将要访问的路径
from 代表从哪个路径跳转而来
next()是一个函数 表示放行
next() 放行 next(’/login’) 强制跳转

• beforeEach会在路由匹配之前，执行
• 如果执行了next()方法，才会继续匹配路由，跳到对应的vue界面

实现退出功能

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

logout() {
      // 清除token
      window.sessionStorage.clear()
      //路由跳转
      this.$router.push('/login')
    }