vue+axios新手实践实现登陆的示例代码
95 浏览量
2020-08-27
09:32:42
上传
评论 1
收藏 55KB PDF 举报
vue+axios新手实践实现登陆的示例代码新手实践实现登陆的示例代码
主要介绍了vue+axios新手实践实现登陆的示例代码，实现了登陆拦截，小编觉得挺不错的，现在分享给大家，
也给大家做个参考。一起跟随小编过来看看吧
其实像这类的文章网上已经有很多很好的,写这篇文章，相当于是做个笔记，以防以后忘记
用到的：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: (state, data) => {
// 把用户名存起来
state.user = data
window.sessionStorage.setItem('user', data)
},
//登出
LOGOUT: (state) => {
// 登出的时候要清除token
state.token = null
state.user = null
window.sessionStorage.removeItem('token')
window.sessionStorage.removeItem('user')
}
}
const actions = {
}
export default new Vuex.Store({
state,
mutations,
actions
})
1、我在这里是将登录状态token,和用户名user存在sessionStorage里，以便组件使用,如果token为true则表示用户已经登陆
sessionStorage和token这两个东西很简单用法自行百度
2、不要忘了在main.js引入store，vue实例中也要加入store
main.js
import store from './store/index'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
资源评论
