电商后台管理系统登录功能前端实现

目录

一 登录概述

1 登录业务流程

2 登录业务的相关技术点

3 token 和 cookie/session 一般选型策略

4 路由导航守卫控制访问权限

5 退出功能实现原理

二 登录—— token 原理分析

三 登录功能实现

登录页面的布局

四 梳理项目结构

1 清理 APP.vue组件

2 清理路由文件 index.js

3 删除不必要的文件

五 安装less-Loader和less依赖

六 将阿里的图标库放到下面目录

七 代码

1 新建登录组件 Login.vue

2 修改路由 index.js

3 修改APP.vue,添加路由占位符

4 新建全局样式 global.css

5 修改入口文件main.js

6 因为是按需导入的，修改element.js

7 创建一个简单的Home.vue进行测试

八 测试

1 登录前页面

2 输入正确的用户名和密码，成功登录

3 点击退出按钮后的页面

九 源码

---

一 登录概述

1 登录业务流程

a 在登录页面输入用户名和密码

b 调用后台接口进行验证

c 通过验证之后，根据后台的响应状态跳转到项目主页

2 登录业务的相关技术点

• http 是无状态的

• 通过 cookie 在客户端记录状态

• 通过 session 在服务端记录状态

• 通过 token 方式维持状态

3 token 和 cookie/session 一般选型策略

当前端和后端项目存在跨域，推荐使用token方式。

当前端和后端项目不存在跨域，推荐使用cookie和session技术。vue前后端使用的是跨域，一般使用token。

4 路由导航守卫控制访问权限

如果用户没有登录，但是直接访问URL访问特定的页面，需要重新导航到登录页面。

5 退出功能实现原理

基于 token 方式实现退出比较简单，只需要销毁本地的 token 即可，后续请求就不会携带 token，必须重写登录生成一个新的 token 之后才可以访问页面。

二 登录—— token 原理分析

三 登录功能实现

登录页面的布局

通过 Element-UI 组件实现布局，会用到下面组件：

• el-form
• el-form-item
• el-input
• el-button
• 字体图标

这些组件布局后的效果如下：

四 梳理项目结构

1 清理 APP.vue组件

<template>
  <div id="app">
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
</style>

2 清理路由文件 index.js

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

Vue.use(VueRouter)

  const routes = [
]

const router = new VueRouter({
  routes
})

export default router

3 删除不必要的文件

• About.vue
• Home.vue
• HelloWorld.vue

五 安装less-Loader和less依赖

六 将阿里的图标库放到下面目录

F:\vue\vue_shop\src\assets

文件从： https://gitee.com/cakin24/vue-shop-admin/tree/master/src/assets 获取

七 代码

1 新建登录组件 Login.vue

<!--结构-->
<template>
    <div class="login_container">
        <!-- 登录盒子 -->
        <div class="login_box">
            <!-- 头像区域 -->
            <div class="avatar_box">
                <img src="../assets/logo.png" alt=