vue實現登錄功能，且刷新頁面不丟失數據

僅個人學習記錄

github：https://github.com/otatoz/login-vue

預覽地址：http://47.93.255.92/login

項目說明：姓名: customer1或customer2或customer3

                  密碼: 123321

目錄結構：

 

大致流程：

---

---

代碼說明：

store/modules/login.js

登錄頁面的狀態管理機，在此頁面執行登錄功能

import {post_json,get} from '@/http/axios'
import {setToken} from '../../utils/index'
export default {
    namespaced:true,
    state:{
        //登錄用戶信息
        info:[]
    },
    getters:{

    },
    mutations:{
        refreshInfo(state,info){
            state.info = info;
        }        
    },
    actions:{
        // 登錄，獲取token
        async loginHandler(context,params){
            let res = await post_json('/user/login',params);
            let token = res.data.token;
            // 設置token到本地存儲
            setToken(token)
        },
        // 根據令牌token換取登錄信息
        async userInfo(context,token){
            let res = await get('/user/info',{token});
            context.commit('refreshInfo',res.data)
        } 
    }
}

utils/index.js

工具目錄，用於將token令牌設置到本地存儲中

export function setToken(token){
    localStorage.setItem('token',token)
}
export function getToken(){
    return localStorage.getItem('token')
}

router/index.js

路由，控制頁面跳轉，同時在此處可編寫代碼，防止頁面刷新導致數據丟失

import Vue from 'vue'
import VueRouter from 'vue-router'

// 登錄配置
import Login from '../views/Login.vue'
import {getToken} from '../utils/index'
import store from '../store'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'login',
    component: Login
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    // 路由獨享的守衛
    beforeEnter: (to,from,next) => {
      let token = getToken();
      if(token){
        // 查詢info
        store.dispatch('login/userInfo',token)
        .then(()=>{
          // 當獲取萬用戶信息之後才允許跳轉
          next();
        })
      } else {
        // 跳轉到登錄
        next({path:'/login'})
      }
    }
  }
]

const router = new VueRouter({
  routes
})

export default router

views/Login.vue

登陸頁面，編寫相關事件

<template>
  <div class="home">
    <h1>登陸界面</h1>
    <el-form label-width="80px" :model="formLogin">
      <el-form-item label="姓名">
        <el-input v-model="formLogin.username"></el-input>
      </el-form-item>
      <el-form-item label="密碼">
        <el-input type='password' v-model="formLogin.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="toHome">登錄</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
export default {
  data(){
    return {
      formLogin:{
        type:'customer'
      }
    }
  },
  computed:{
    ...mapState('login',['info'])
  },
  created(){

  },
  methods:{
    ...mapActions('login',['loginHandler','userInfo']),
    toHome(){
      this.loginHandler(this.formLogin).then((res)=>{
        this.$router.push({path:'/about'})
      })
    }
  }
}
</script>

---

實際應用

爲了用戶登陸後，在所有的頁面都能獲取到用戶信息，可以將項目目錄設置成如下格式

路由的配置如下：

即用戶在進入每個頁面時，都會經過manager，都會執行根據token獲取用戶信息的代碼，所以做到了任意頁面都可以獲取到用戶數據的效果