仅个人学习记录

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获取用户信息的代码，所以做到了任意页面都可以获取到用户数据的效果