项目初始化和登录退出（一）

相关的知识

1. 定义和渲染组件components，定义路由规则

2. 路由重定向redirect

3. 路由占位符

4. axios：$http发送请求

5. element ui提供的message弹框提示：$message

6. 表单

   • 数据绑定 :model【loginForm】
   • 数据校验 :rules【loginFormRules】
   • 数据引用 ref【loginFormRef】
     • 表单重置 ref + resetFields()
     • 登录前的预校验 ref + validate()

7. sessionStorage

   • 登录：sessionStorage设置token；
   • 退出： sessionStorage清空token

8. 编程式导航

9. 路由导航守卫 beforeEach

实现的功能

功能	详述
项目初始化	使用vue ui手动创建项目；安装Element-ui；安装axios依赖；初始化git远程仓库
项目全局配置	安装less-loader和less开发依赖；全局样式表；配置axios($http)；element ui提供的弹框提示message
登录退出	渲染组件和路由；数据绑定 ；数据校验；表单重置；登录前的预校验；登录退出；路由导航守卫

使用到的Element-ui组件

组件名称_EN	注册	备注
Button	Vue.use(Button)	按钮
Form	Vue.use(Form)	表单
FormItem	Vue.use(FormItem)
Input	Vue.use(Input)	输入框
Message	Vue.prototype.$message = Message	消息提示

项目创建初始化

1. 使用vue ui手动创建项目，安装Babel、Router，勾选使用配置文件（不同配置存放在单独的文件中），选择hash模式的路由。
2. 安装Element-ui，添加插件vue-cli-plugin-element，选择按需导入 import on demand。
3. 安装axios依赖，选择运行依赖axios。
4. 初始化git远程仓库，添加公钥（第一次），码云创建仓库，git remote add origin https://gitee.com/xuzichang/仓库名称.git + git push -u origin master。

项目全局配置

①渲染组件和路由

1. 文件夹components—>Login.vue—>初始化vue文件vue+Tab

2. 通过路由渲染组件到APP根组件

// [index.js(router.js)]
// 导入组件
import Login from '../components/Login.vue'
// 新增路由规则
const routes = [
  { path: '/', redirect: '/login' },// 路由重定向
  { path: '/login', component: Login },
]

<!-- [App.vue] -->
<template>
  <div id="app">
    <!-- 放置路由占位符 -->
    <router-view></router-view>
  </div>
</template>

②安装less-loader和less开发依赖

使用了less的style。

③全局样式表

/* [assets/css/global.css] */
html,body,#app{
    height: 100%;
    margin: 0;
    padding: 0;
    min- 1366px;
}

// [main.js]
// 导入全局样式表
import './assets/css/global.css'

④配置axios

// [main.js]
// 导入axios
import axios from 'axios'
// 配置请求的根路径 后台api请求根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 挂载vue的原型上
Vue.prototype.$http = axios

⑤弹框提示 element ui提供的message

// [plugins/element.js]
// 按需导入Message
import {Message} from 'element-ui'
// 挂载到Vue原型组件上
Vue.prototype.$message = Message

一、登录功能

业务流程

• 在登录页面输入用户名和密码
• 调用后台接口进行验证
• 通过验证之后，根据后台的响应状态跳转到项目主页

登录技术点：http是无状态的

①通过cookie在客户端记录状态+通过session在服务器端记录状态【前端和后台不存在跨域问题】
②通过token方式维持状态【前端和后台存在跨域问题】

1、表单

<!-- [Login.vue] -->
<!-- 登录表单 -->
<el-form ref="loginFormRef" class="login_form" :model="loginForm" :rules="loginFormRules">
    <!-- 用户名 -->
    <el-form-item prop="username">
        <el-input prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input>
    </el-form-item>
    <!-- 密码 -->
    <el-form-item prop="password">
        <el-input
                  prefix-icon="iconfont icon-3702mima"
                  v-model="loginForm.password"
                  type="password"
                  ></el-input>
    </el-form-item>
    <!-- 按钮 -->
    <el-form-item class="btns">
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="info" @click="resetLoginForm">重置</el-button>
    </el-form-item>
</el-form> 

2、数据绑定 :model

表单form—>:model="loginForm"，loginForm对象定义在data中

表单项input—>v-mode="loginForm.username"，绑定到loginForm对象的username上

// [Login.vue -> data]
// 登录表单的数据绑定对象
loginForm: {
    username: '',
    password: ''
}

3、数据校验 :rules

表单form—>:rules="loginFormRules"，loginFormRules校验对象定义在data中，每一个属性都是一个校验规则

表单项form-item—>prop="username"，指定验证规则

// [Login.vue -> data]
// 表单的验证规则对象
loginFormRules: {
    // 验证用户名
    username: [
        { required: true, message: '请输入登录名称', trigger: 'blur' },
        { min: 3, max: 10, message: '长度在3-10之间', trigger: 'blur' }
    ],
    // 验证密码
    password: [
        { required: true, message: '请输入登录密码', trigger: 'blur' },
        { min: 6, max: 15, message: '长度在6-15之间', trigger: 'blur' }
    ]
}

4、表单重置 ref + resetFields()

表单form—>ref ="loginFormRef"，loginFormRef表单引用对象

通过$refs引用获取表单对象loginFormRef，调用表单对象loginFormRef的resetFields()方法重置表单

// [Login.vue -> methods]
// 重置登录表单
resetLoginForm() {
    this.$refs.loginFormRef.resetFields()
}

5、登录方法

// [Login.vue -> methods]
// 登录前预验证
login() {
    this.$refs.loginFormRef.validate(async (valid) => {
        // 不发起请求
        if (!valid) return
        // 发起请求
        const { data: result } = await this.$http.post('login', this.loginForm)
        if (result.meta.status !== 200) return this.$message.error('登录失败')
        this.$message.success('登录成功')
        // 1．将登录成功之压的 token，保存到客户端的sessionstorage中
        // 1.1项目中出了登录之外的其他API接口，必须在登录之后才能访问
        // 1.2 token只应在当前网站打开期间生效，所以将 token保存在sessionStorage中
        window.sessionStorage.setItem('token', result.data.token)
        // 2．通过编程式导航跳转到后台主页，路由地址是/home
        this.$router.push('/home')
    })
}

①登录前的预校验 ref + validate()

this.$refs.loginFormRef.validate(async (valid) => {
    // 不发起请求
    if (!valid) return
    // 发起请求
    const { data: result } = await this.$http.post('login', this.loginForm)
    if (result.meta.status !== 200) return this.$message.error('登录失败')
    this.$message.success('登录成功')
    // ......
})

②登录后 设置token + 编程式导航

• 将登录成功之压的 token，保存到客户端的sessionstorage中
  • 项目中出了登录之外的其他API接口，必须在登录之后才能访问
  • token只应在当前网站打开期间生效，所以将 token保存在sessionStorage中
• 通过编程式导航跳转到后台主页，路由地址是/home

this.$refs.loginFormRef.validate(async (valid) => {
    // ......
    window.sessionStorage.setItem('token', result.data.token)
    this.$router.push('/home')
})   

6、路由导航守卫 beforeEach

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

router.beforeEach((to[将要访问的路径], from[从哪个路径跳转而来], next[函数，表示放行]) => {})

// [index.js]
const router = new VueRouter({
  routes
})

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  //    next()放行  next('/login')强制跳转
  if (to.path === '/login') return next()
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

export default router

二、退出功能

基于token的方式，只需要销毁本地的token即可。后续的请求必须重新登录生成一个新的token之后才可以访问页面。

// [Home.vue]
logout() {
    // 清空token
    window.sessionStorage.clear()
    // 编程式导航跳转到登录页
    this.$router.push('/login')
}