vue+axios新手实践实现登陆

最新推荐文章于 2024-09-20 10:38:19 发布

做一个有知识的流氓

最新推荐文章于 2024-09-20 10:38:19 发布

阅读量6.5k

点赞数 7

分类专栏： Vue 文章标签： vue axios

本文链接：https://blog.csdn.net/qq_36370731/article/details/80752461

版权

本文记录了使用Vue、Axios和Vue-Router实现登录功能的过程。登录流程包括提交表单获取后台数据，将数据存储在Vuex中，并通过Vuex管理登录状态。在main.js中引入Vuex，利用router.beforeEach进行路由拦截，确保登录状态。同时， Axios发送请求，成功后更新Vuex状态并根据需要跳转页面。

摘要由CSDN通过智能技术生成

其实像这类的文章网上已经有很多很好的,写这篇文章，相当于是做个笔记，以防以后忘记
用到的：1、 vuex 2、axios 3、vue-route

登陆流程为：1、提交登陆表单，拿到后台返回的数据
2、将数据存入vuex

vuex配置

这里直接跳过安装之类的，百度一大堆，我直接上代码

// store index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// 初始化时用sessionStore.getItem('token'),这样子刷新页面就无需重新登录
const state = {
  user: window.sessionStorage.getItem('user'),
  token: window.sessionStorage.getItem('token')
}
const mutations = {
  //将token保存到sessionStorage里，token表示登陆状态
  SET_TOKEN: (state, data) => {
    state.token = data
    window.sessionStorage.setItem('token', data) 
  },
  //获取用户名
  GET_USER: (