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

其实像这类的文章网上已经有很多很好的,写这篇文章，相当于是做个笔记，以防以后忘记

用到的：1、 vuex 2、axios 3、vue-route

登陆流程为：

1、提交登陆表单，拿到后台返回的数据

2、将数据存入vuex

vuex配置

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

// 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})

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/>'})

vue-route配置

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

这里我用到router.beforeEach来实现拦截登陆，

1、在需要验证的路由的meta里加入我们自己的requireAuth