本文共 2161 字，大约阅读时间需要 7 分钟。

仅个人学习记录

github：

预览地址：

项目说明：姓名: 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

登陆页面，编写相关事件

实际应用

为了用户登陆后，在所有的页面都能获取到用户信息，可以将项目目录设置成如下格式

路由的配置如下：

即用户在进入每个页面时，都会经过manager，都会执行根据token获取用户信息的代码，所以做到了任意页面都可以获取到用户数据的效果

转载地址：http://nrtgn.baihongyu.com/