//验证码
code:‘’,
//密码
password:‘’,
//确认密码
password1:‘’,
//是否同意协议
agree:true
}
},
methods:{
//获取验证码
async getCode(){
//简单判断一下
try{
//如果获取验证码
const {phone} =this;
phone&&(await this.$store.dispatch(‘getCode’,phone))
//将组件的code属性值变为仓库中的验证码
this.code = this.$store.state.user.code
}catch(error){
}
},
//用户注册
async userRegister(){
try {
//如果成功–路由跳转
const{phone,code,password,password1}=this;
(phone&&code&&password==password1)&& await this.$store.dispatch(‘userRegister’,{phone,code,password});
this.$router.push(‘/login’);
} catch (error) {
alert(error.message)
}
}
}
}
获取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、完整代码
登录组件代码: