vue+axios新手实践实现登陆的示例代码

// store index.jsimport 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})

import store from './store/index'new Vue({ el: '#app', router, store, components: { App }, template: '<App/>'})

import Vue from 'vue'import Router from 'vue-router'import Login from '../components/Login'import Activity from '../components/Activity'import Index from '../components/Index'import store from '../store/index'Vue.use(Router)const router = new Router({ routes: [ {  path: '/',  name: '/',  component: Index }, {  path: '/login',  name: 'login',  component: Login }, {  path: '/activity',  name: 'activity',  component: Activity,  meta: {  requireAuth: true // 添加该字段，表示进入这个路由是需要登录的  } } ]})// 注册全局钩子用来拦截导航router.beforeEach((to, from, next) => { const token = store.state.token if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if (token) { // 通过vuex state获取当前的token是否存在  next() } else {  console.log('该页面需要登陆')  next({  path: '/login'  // query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由  }) } } else { next() }})export default router

submitLogin () { this.$refs.loginForm.validate(valid => { if (valid) {  axios.post('/login', {  user: this.loginForm.user,  pass: this.loginForm.pass  })  .then((response) => {   if (response.status === 200) {   this.$store.commit('SET_TOKEN', response.data.token)   this.$store.commit('GET_USER', response.data.user)   this.$message({    message: '登陆成功',    type: 'success'   })   this.$router.push({name: 'activity'})   }  })  .catch(function (error) {   console.log(error)  }) } else {  console.log('error submit!!')  return false } })},