登录功能实现流程

💂 个人网站:【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴，请点击【前端学习交流群】

登录实现流程

1.看接口文档

登录功能必须注册功能已经实现的，登录是已经注册好的用户。

需要带两个参数
post请求
请求URL：**/api/login*
请求方式：POST
请求体：

参数名	必选	类型	说明
username	是	string	用户名
password	是	string	密码

2.书写接口

	src
	├── api
	     ├── index.js 	（api接口同一管理）

index.js

// 登录接口
// /login   请求方式 ： POST
export const reqLogin = (data) =>requests({ url:"/api/login", method:"post",data})

3.表单收集数据

通过v-model收集好账号密码数据放ruleForm对象里

 ruleForm: {
        username: "",
        pass: "",
      },

4.发请求

数据我们已经收集好了，现在就是带着数据发请求。
一般这种都是登录按钮点击完发起请求，所以要在注册按钮绑定事件函数。
1.绑定事件函数

<el-button type="primary" @click="login('ruleForm')">登录</el-button>

2.书写事件函数

//登录回调函数
    login(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          //解构出表单数据
          const { username, pass } = this.ruleForm
          //后端需要application/x-www-form-urlencoded 格式的表单数据 通过URLSearchParams 解析参数 
          let params = new URLSearchParams()
          params.append("username", username)
          params.append("password", pass)
          //参数整理完 发请求
          let { data: result } = await this.$API.reqLogin(params)
          //判断请求是否请求成功
          if (result.status == 0) {
            this.$router.push("/layout")
          }else{
            this.$message.error(result.messages)
          }
          
        } else {
          this.$message.error("按提示填写")
          return false;
        }
      });
    },

1.登录注册都是引入element ui，当饿了么通过表单验证时，就解构出表单数据，不通过弹窗提示。
2.后端需要application/x-www-form-urlencoded 格式的表单数据 通过URLSearchParams 解析参数
3.参数整理完 发请求，请求成功跳转首页，失败弹窗提示。

5.保存token

5.1 了解token

发起请求成功后，打印请求成功的结果你会发现后端会返回一个令牌（token）

	 if (result.status == 0) {
            console.log(result);
          }

登录进去之后都要携带token，带着token才能跟后端拿数据。否则拿不到

5.2保存token

token保存到哪里？
token保存到本地存储，持久化，还有一种保存到vuex
注意：vuex本身不是持久化存储的，刷新就没有了。需要通过插件进行存储。（vuex- persist）
我这里就用本地存储，利用vuex进行本地存储，也可以在当前组件本地存储比较方便，为学习多点把vuex用上

1.搭建vuex环境（我这里项目是vue2,下载vuex3版本）
创建好文件夹
src
├── store
├── index.js（仓库）

import Vue from "vue"
import Vuex from "vuex"
//使用Vuex
Vue.use(Vuex)


const actions = {
  
}

const mutations = {
   
}

const state = {
}

export default new Vuex.Store({
    actions,
    mutations,
    state
})

在main.js文件注册一下

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

2.实现保存token
在发请求请求成功的时候进行commit提交mutations
注意：可以组件直接commit提交mutaions,不是一定需要dispatch提交给actions，因为actions是用来发请求的，我们的请求已经在组件发了。所以不用dispatch

先封装个工具函数----创建好文件夹
src
├── utils
├── Token.js（有关token工具函数同一管理）

Token.js

//存储token
export const setToken = (token) => {
    localStorage.setItem("TOKEN", token)
}

//获取Token
export const getToken = () => {
    return localStorage.getItem("TOKEN")
}

//删除token
export const removeToken = () => {
    localStorage.removeItem("TOKEN")
}

三个工具函数要用到的，登录就要用setToken和getToken函数，退出登录就要用到removeToken函数

登录页面：
在刚才的基础上加
//账号密码成功跳转首页并且保存token
this.$store.commit(“updateToken”,result.token)
//token保存到本地存储
setToken(result.token)

import {setToken} from "@/utils/Token"
			.....省略上面代码
		 //判断请求是否请求成功
          if (result.status == 0) {
            //账号密码成功跳转首页并且保存token
            this.$store.commit("updateToken",result.token)
            //token保存到本地存储
            setToken(result.token)
            this.$router.push("/layout")
          }else{
            this.$message.error(result.messages)
          }
	.....省略下面代码

然后再vuex书写刚刚commit的updateToken的函数

	src
	├── store
	     ├── index.js（仓库）

import {getToken} from "@/utils/Token"

const mutations = {
    // 登录成功获取Token
    updateToken(state, token) {
        state.token = token
    },
}


const state = {
    // 存储token
    token: getToken(),
}

state存储token要在本地存储获取，为什么呢，如果不是本地获取，那就是存储在vuex刷新就没有了，所以要在本地存储获取，调用封装好的函数 getToken()

登录的大致操作就是这些了，需要小伙伴有一定的基础才能看得懂，不懂也可以找up

想看注册的点这里 链接: 注册功能实现