四、登录退出

最新推荐文章于 2024-08-12 13:05:50 发布

C.&H.

最新推荐文章于 2024-08-12 13:05:50 发布

阅读量2k

点赞数

分类专栏： Vue电商项目实战

本文链接：https://blog.csdn.net/sunnnnh/article/details/115015752

版权

Vue电商项目实战专栏收录该内容

23 篇文章 16 订阅

订阅专栏

（3）渲染login组件，并实现路由重定向

（4）设置背景色，并在屏幕中央绘制登录盒子

（5）绘制默认头像

（6）绘制登录表单区（利用elementUI组件）

（11）登陆前表单数据的预验证（点击登录时，进行验证）

（12）配置axios发起登录请求

（13）配置Message全局弹框组件（提示用户登录成功或失败）

（14）完善登录之后的操作

（15）用路由导航守卫控制访问权限（如果用户没有登录，通过url访问到特定页面，需要重新导航到登录页面）

(16) 实现退出功能

（17）语法处理---处理项目中EsLint报错问题

（18）将本地代码提交到本地仓库，并将本地仓库和码云同步

前端和后台不存在跨域的问题时，使用cookie和session；存在跨域问题时，使用token

一、token原理分析

二、登陆页面布局

（1）创建login子分支

1）在VS code 打开项目vue_shopcc，并执行git status，查看当前工作区是否干净

2）创建login分支：git checkout -b login

3）查看所有分支：git branch

（2）梳理项目结构

main.js是整个项目的入口文件

1）打开vue 可视化面板。点击任务 -》serve -》运行

2）编译成功，点击启动app

3）显示该页面，即启动成功

4）将App.vue中不用的代码删除，如下

5）将router/index.js 中不用的代码删除，如下

6）删除views文件夹和 components文件下的HelloWorld.vue

7）刷新localhost:8080

8）出现下面错误时，运行npm run lint解决

Module Error (from ./node_modules/eslint-loader/index.js):

F:\H5DaiMa\VS Code\Day4 ShiZhan\vue_shopcc\src\App.vue
  9:14  error  Unexpected trailing comma  comma-dangle

（3）渲染login组件，并实现路由重定向

1. 渲染login组件

2. 实现路由重定向（输入‘/’，直接跳转到login界面）

输入：

跳转到：

3. 代码

Login.vue

<template>
    <div>
        登陆组件
    </div>
</template>
<script>
export default {

}
</script>
<style lang="less" scoped>

</style>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

（4）设置背景色，并在屏幕中央绘制登录盒子

1. 首先安装less loader 和 less（保证css样式有效）

进入vue可视化界面，依赖 -》安装依赖 -》开发依赖 -》输入less-loader 并选中，-》安装

再安装less

添加完依赖后，重启项目（停止 -》运行 -》启动app）

问题：由于less和less-loader版本相差过高，导致出错

解决：直接在vue可视化界面删除less 和 less-loader

然后在控制台执行：npm install less@3.9.0 less-loader@4.1.0 --save-dev

2. 设置css样式

在assets下创建文件夹css, 在css下创建global.css(设置全局样式)

将global.css导入main.js

在login.vue创建盒子，并设置样式

3. 效果图

（5）绘制默认头像

（6）绘制登录表单区（利用elementUI组件）

1. 首先按需导入需要的elementUI组件（plugins/element.js）

2. 参照elementUI官网，进行使用

3. 设置样式

4.效果图

（7）绘制带icon的input输入框

1. 参照下图，为输入框添加icon图标：

2.再通过icon图标库，换成想要的图标：

2.1 首先下载图标，将下载的文件放到assets文件：

2.2 在main.js文件中导入样式表：

2.3 在login.js中为输入框添加对应的图标：

（8）实现表单的数据绑定

（9）表单数据验证

验证步骤（根据ElementUI官网）：

1）为表单添加规则（引号中的rules可以自定义）

2）在script中定义表单规则（这里的rules与上述引号中的名一致，自定义）

3）在表单的输入框中通过prop添加相应的规则

添加表单验证：

（10）表单的重置功能

首先通过ref获取表单对象，然后调用表单方法resetFields对表单重置

（11）登陆前表单数据的预验证（点击登录时，进行验证）

点击登录时，触发点击事件，该事件通过调用表单方法validate对表单验证（同上，需通过ref获取表单对象）

（12）配置axios发起登录请求

1. 如果登录验证的结果为false，则登陆失败，return

2. 如果登录验证的结果为true，则验证输入的用户名和密码是否正确

2.1 首先在main.js中配置axios

参考API文档，获取根路径

2.2 在login的登录验证方法中，获取登录状态信息，如果状态码为200，则登录成功

2.2.1 如果请求API服务器，需要保证其为运行状态。

.首先将phpStudy中的MySQL启动

.启动F:\H5DaiMa\VS Code\Day4 ShiZhan\Data\vue_api_server中的app.js

2.2.2 由于该方法获取的值是promise，我们可以使用await和async（用来修饰离await最近的方法）来简化promise。

并获取其中的data属性，将其重命名为res。

状态码位于data中

（13）配置Message全局弹框组件（提示用户登录成功或失败）

参考elementUI中的：

1. 首先在element.js中导入弹框组件

2. 在login.vue中使用弹框组件

（14）完善登录之后的操作

1. Login.vue 进行下面的配置

步骤（13）中获取的data数据中，包含token

2. 创建Home.vue组件

3. 将/home添加到路由（router/index.js）

4. 注意：需要将导入的这些element组件写在一起，不然会报错

（15）用路由导航守卫控制访问权限（如果用户没有登录，通过url访问到特定页面，需要重新导航到登录页面）

当在home页面时，我们删除Session Storage中的token值。

对页面刷新后，仍然可以访问home页面（正常情况下，token值不在，该页面就不能访问）

因此我们用路由导航守卫来控制访问权限。

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login.vue'
import Home from '@/components/Home.vue'

Vue.use(Router)

const router =  new Router({
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/home',
      component: Home
    }
  ]
})

router.beforeEach(( to, from, next ) => {
  //1.如果是跳转到登录页面，放行
  if(to.path ==='/login') next()
  //2.如果是其它页面，获取token值。
  const tokenStr = window.sessionStorage.getItem('token')
  //2.1 如果token为空，跳转到登录页面
  if( !tokenStr ) next('/login')
  //3.1 r如果不为空，则放行
  next()
})

export default router

删掉token值，再访问home页面时，直接调转到了登录页面