项目前景：后台管理系统是公司必备的，从前些年由于技术人员的稀有，导致后台系统非常昂贵，近些年IT行业的快速发展，使得一些中小型公司开始自己写后台，自己维护，从而获取利益的最大化。
今天是一个简单的后台登录操作

演示效果：

1

一、页面布局（Vue+Element Ui）

二、登录的流程

1、调用登录接口
2、登录成功：
3、保存token
4、跳转到首页，并给出成功的提示
5、失败：给出错误提示，让用户重新登录
具体代码：
新建文件夹对axios进行封装
封装请求

import axios from "axios";const service = axios.create({baseURL: "url地址",timeout: 3000});//请求拦截器service.interceptors.request.use(function (config) {//判断如果不是登录页，必须携带token到后端，才能正常返回数据//判断如果不是login页，获取token,并通过请求头携带到后端if (config.url !== 'login') {const token = localStorage.getItem('token');//设置请求头config.headers['Authorization'] = token;}return config;},function(error) {return Promise.reject(error);});//响应拦截器service.interceptors.response.use(function(response) {return response;},function(error) {return Promise.reject(error);});export default service;

请求接口api

import request from "./index";export function login(data) {// console.log('data::',data)return request({url: "login",method: "POST",data});}

在main.js中进行全局路由拦截

//全局路由拦截router.beforeEach((to, from, next) => {console.log("from:", from);console.log("to:", to);if (to.meta.auth) {const token = localStorage.getItem('token')if (!token) {next({name: 'login',query: { redirect:to.fullPath}})} else {next() }} else {next();}})

登录页面代码

<template><div class="login_wrap"><el-formclass="login_form"label-position="right"label-width="80px":model="userinfo":rules="loginRules"><h1>用户登录</h1><el-form-item label="用户名" prop="username"><el-input v-model="userinfo.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="userinfo.password" type="password"></el-input></el-form-item><el-button type="primary" class="login_btn" @click.prevent="handleLogin">登录</el-button></el-form></div></template><script>//引入登录接口import { login } from "@/http/api";export default {name: "login",data() {return {userinfo: {username: "",password: ""},loginRules: {username: [{ required: true, message: "请输入用户名", trigger: "blur" },{ min: 5, max: 20, message: "长度在 5 到 20个字符", trigger: "blur" }],password: [{ required: true, message: "请输入密码", trigger: "blur" },{ min: 5, max: 60, message: "长度在 5 到 20 个字符", trigger: "blur" }]}};},methods: {async handleLogin() {/** * 调用登录接口 * 成功： * 保存token * 跳转到首页，并给出成功的提示 * 失败：给出错误提示，让用户重新登录 */const res = await login(this.userinfo);const {meta: { msg, status }} = res.data;if (status === 200) {const { token } = res.data.data;localStorage.setItem("token", token);//记住上次没有token要访问的页面地址，如果登录成功，再返回到上次要访问到页面const { redirect } = this.$route.query;//如果直接登录，没有redirect,成功后直接跳转到homeif (!redirect) {this.$router.push({ name: "Home" });} else {this.$router.push({ path: redirect });}this.$message({message: msg,type: "success"});} else {this.$message({message: msg,type: "error"});}}}};</script><style lang="scss" scoped>.login_wrap {width: 100%;height: 100%;background: #072765;}.login_form {width: 40%;height: 260px;padding: 30px;background: #fff;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;h1 {text-align: center;margin: 10px 0;}}.login_btn {width: 100%;}</style>

总结：以上是一个后台管理系统实现登录的流程思路，具体请结合API进行实现

欢迎大家进群进行技术性的探讨， 群号：954314851