Web前端最全【Vue项目心得笔记】登录与注册（上）---token（重要(3)，字节跳动历年前端中高级面试题全收录

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

input {

width: 270px;

height: 38px;

padding-left: 8px;

box-sizing: border-box;

margin-left: 5px;

outline: none;

border: 1px solid #999;

}

img {

vertical-align: sub;

}

.error-msg {

position: absolute;

top: 100%;

left: 495px;

color: red;

}

}

.controls {

text-align: center;

position: relative;

input {

vertical-align: middle;

}

.error-msg {

position: absolute;

top: 100%;

left: 495px;

color: red;

}

}

.btn {

text-align: center;

line-height: 36px;

margin: 17px 0 0 55px;

button {

outline: none;

width: 270px;

height: 36px;

background: #e1251b;

color: #fff !important;

display: inline-block;

font-size: 16px;

}

}

}

.copyright {

width: 1200px;

margin: 0 auto;

text-align: center;

line-height: 24px;

ul {

li {

display: inline-block;

border-right: 1px solid #e4e4e4;

padding: 0 20px;

margin: 15px 0;

}

}

}

}

获取api接口地址

//获取验证码

//URL:/api/user/passport/sendCode/{phone} get

export const reqGetCode = (phone) =>requests({url:/user/passport/sendCode/${phone},method:‘get’})

//注册

export const reqUserRegister =(data)=>requests({url:/user/passport/register,data,method:‘post’})

vuex

import { reqGetCode ,reqUserRegister} from “@/api”;

//登录与注册的模块

const state={

code:‘’

};

const mutations={

GETCODE(state,code){

state.code=code;

}

};

const actions={

//获取验证码

async getCode({commit},phone){

//获取的验证码的这个接口，把验证码返回，但是正常情况是要发送到用户手机上

let result = await reqGetCode(phone);

// console.log(result)

if(result.code==200){

commit(‘GETCODE’,result.data)

return ‘ok’

}else{

return Promise.reject(new Error(‘fail’))

}

},

//用户注册

async userRegister({commit},user){

let result=await reqUserRegister(user)

// console.log(result)

if(result.code==200){

return ‘ok’

}else{

return Promise.reject(new Error(‘fail’))

}

}

};

const getters={};

export default{

state,

mutations,

actions,

getters

}

二、登录（重要！！！）

===========

1、登录业务（token）

---

登录之前先注册，通过数据库存储用户信息（名字，密码）

登录成功的时候，后台为了区分用户是谁，服务器下发token【令牌：唯一标识符】。

登录成功显示token：

只要有token，就登录成功了。

注意：vuex存储数据不是持久化

2、登录完毕后，会显示用户名

---

登录完毕后会在home首页显示用户名

当用户登录向服务器发送请求（组件派发action：userInfo）,登录成功获取到token，存储于仓库之中（非持久化的），然后路由跳转到home首页。

因此在首页当中（mounted）派发action获取用户信息，动态展示header组件内容

Home组件 添加

在vuex里

显示未登录 ，因为此时还没有token

在request.js文件中（在请求拦截器那里）添加：

因为home组件上方的登录位置需要变成用户名字，所以需要有两种结构来进行动态展示

这里利用计算属性，来计算有没有用户名字userName

通过v-if来进行动态的展示结构：

请

登录

免费注册

{{userName}}

退出登录

最终效果：

但是一刷新home首页，就获取不到用户信息了**（token：vuex非持久化存储）**

3、持久化存储token

---

这里利用本地存储：localStorage

把token存储在localStorage中。

简单封装一下函数

//存储token

export const setToken = (token)=>{

localStorage.setItem(‘TOKEN’,token)

}

//获取token

export const getToken = ()=>{

return localStorage.getItem(‘TOKEN’)

}

在vuex中（伪代码）

import {setToken,getToken} from ‘@/utils/token’;

//登录与注册的模块

const state={

code:‘’,

token:getToken(),

userInfo:{}

};

//actions中：

//登录业务【token】

async userLogin({commit},data){

let result = await reqUserLogin(data);

//服务器下发token

if(result.code==200){

commit(“USERLOGIN”,result.data.token)

//持久化存储token

setToken(result.data.token)

// localStorage.setItem(“TOKEN”,result.data.token)

return ‘ok’

}else{

return Promise.reject(new Error(‘fail’))

}

},

4、退出登录，清除token

---

首先给退出登录按钮绑定一个click事件

配置好退出登录的api

接下来就是vuex三连环

actions中：

mutation中：

state中不变：

回到组件中，写点击事件的代码：

5、完整代码

---

登录组件代码：

• 扫描登录

• 账户登录

  自动登录

  忘记密码？

  <button class=“btn” @click.prevent=“userLogin”>登  录
• 
• 
• 
• 

• 立即注册
• 关于我们
• 联系我们
• 联系客服
• 商家入驻
• 营销中心
• 手机尚品汇
• 销售联盟
• 尚品汇社区
• 地址：北京市昌平区宏福科技园综合楼6层
  京ICP备19006430号