其實像這類的文章網上已經有很多很好的,寫這篇文章，相當于是做個筆記，以防以后忘記

用到的：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