登录的表单验证

-发起请求之前要导入axios包
-具体请求之前在main.js对axios进行全局配置
main.js

import axios from 'axios'
/* 配置请求的根路径 */
axios.defaults.baseURL="http://127.0.0.1:8888/api/private/v1/"
/* 把这个包挂在到vue的原型对象上 */
Vue.prototype.$http = axios

Login.vue

如果要发起登录请求必须保证API服务器处于运行中的状态
-启动数据库mysql

• 运行api接口中的app.js
  
  
  data 才是服务器返回的真实数据
  

登录组件配置弹窗信息

• 导入弹框提示组件
  配置方式与button、form 不一样
  需要进行全局挂载
  

• 弹框组件挂载到了vue的原型对象上，这样每个组件都可以通过this访问$message,只要访问到$message 就可以进行弹框属性

登录成功后的行为

• localStorage：是持久化的存储机制
• sessionStorage：是会话期间的存储机制
  

创建 Home.vue

Login.vue

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

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

// 为路由对象，添加 beforeEach 导航守卫   (beforeEach 就是导航守卫）
router.beforeEach((to, from, next) => {
 // beforeEach 接受一个回调函数 回调函数中包含三个形参 
 //to：代表将要访问的页面路径
 //from：从哪个页面路径跳转而来
 //next：是一个函数 表示放行
 // 如果用户访问的登录页，直接放行
 if (to.path === '/login') return next()
 //获取token
 // 从 sessionStorage 中获取到 保存的 token 值
 const tokenStr = window.sessionStorage.getItem('token')
 // 没有token，强制跳转到登录页
 if (!tokenStr) return next('/login')
 next()
})
//next（） 放行 
//next('/login') 强制跳转

退出功能

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

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