14前端项目----登录/注册

assets

assets文件夹:一般也是放置静态资源–>一般是多个组件共用的静态资源
webpack 会把 assests 静态资源当作是一个模块，打包到 js 文件里,不存在assests 文件夹

如项目中精灵图则可以放在该文件夹，可以多个组件共用。
在写url时可用@代替src地址，在style里面url这样写url(~@/assets/images/icons.png)

用户注册模块

手机号通过v-model获取，当点击获取验证码，则将向服务器发送请求；还需要获取验证码，在注册时发送给后台验证是否正确
v-model=“phone"和v-model=''code”

user仓库当中：

import { reqGetCode } from '@/api'const state = {code:'',
};
const mutations = {GETCODE(state,code) {state.code = code;}
};
const actions = {//获取验证码async getCode({commit},phone) {let result = await reqGetCode(phone);//result可以获取到验证码，但正常情况下是发给用户手机if (result.code == 200) {commit('GETCODE', result.data);return 'ok';} else { return Promise.reject(new Error('fail'));}}
};
export default {state,mutations,actions,getters
}

• 组件中获取验证码按钮绑定click,触发getCode回调

data(){return{phone:'',code:'',//两次输入的密码需要验证是否相等一起传给服务器password:''.//再次输入密码password1:''}
}
methods: {async getCode() {try {const { phone } = this;//解构出phone,this是组件实例let Reg = /^1[34578]\d{9}$/;//手机号的正则表达式if (Reg.test(phone)) {await this.dispatch('getCode', phone);//这里是直接自动填写了this.code = this.$store.state.user.code;} else {alert('手机号输入不正确！');}} catch (error) {alert(error.message);}}}

• 点击完成注册业务，传递数据给服务器，页面跳转到登录页面

完成注册绑定事件@click="userRegister"

//methodsasync userRegister() {try {const { phone, code, password, password1 } = this;//这里判断code存在和password==password1(code && password == password1) && await this.$store.dispatch('userRegister', { phone, code, password });//成功则进行路由跳转this.$router.push('/login')    } catch (error) {alert(error.message);}       }

登录模块

注意用form表单写的结构，点击登录会进行默认行为路由跳转，所以需要阻止默认事件.prevent

登录绑定@click.prevent="userLogin"

token

vuex发送请求await reqUserLogin(user)返回的数据中有个token属性----随机字符串（uuid是前台自己声明一个，随后给服务器带过去；而token是后台传过来的用户唯一标识）

登录成功后，后台为了区分用户，服务器返回一个token【令牌：唯一标识符】
将来前台需要持久化存储token,之后需要带着token去向服务器请求数据展示

注意：cookie是存储你在浏览器页面所产生的信息，token是校验用户

actions中

if (result.code == 200) {//存储token令牌commit("USERLOGIN", result.data.token);return 'ok';
}else { return Promise.reject(new Error('fail'));}
}

mutaions

USERLOGIN(state,token){state.token = token;
}

！但是存在vuex中一刷新就会没了，toke为初始空字符串
(vuex仓库存储数据非持久化)

添加了token校验获取用户登录信息，用户登录只保存用户的token

login组件业务

 async userLogin() {try {const { user, password } = this;(user && password) && await this.$store.dispatch('userLogin', { user, password });//登录成功跳转到home首页this.$router.push('/home');                } catch (error) {alert(error.message);}}

token校验获取用户登录信息

获取用户信息【需要带着用户的token向服务器要用户信息】

1. 写接口api

//url:/api/user/passport/auth/getUserInfo method:get
export const reqUserInfo = ()=>request({url:'/user/passport/auth/getUserInfo',method:'get'});

2. actions

 //获取用户信息async getUserInfo({ commit }) {let result = await reqUserInfo();console.log(result);}

3. 在home组件挂载完毕则派发actions，获取用户信息

//在mounted中
//获取用户信息在home首页展示
this.$store.dispatch('getUserInfo');

结果是拿不到用户信息result，因为服务器无法识别你的身份，拿不到用户信息。所以需要在加上token，加在请求头上

• 在axios请求拦截器上（在发送请求之前判断是否有token字段，有则在请求头上加上token）

 //需要携带token带给服务器if (store.state.user.token) {//token是和后台key对应config.headers.token = store.state.user.token;}

！注意只有登录的时候才产生了token，则之后发送请求时请求头才有token

完善仓库业务

	//stateuserInfo:''//获取用户信息//actionsasync getUserInfo({ commit }) {let result = await reqUserInfo();if (result.code == 200) {commit('GETUSERINFO', result.data);}}//mutaionsGETUSERINFO(state,userInfo) {state.userInfo = userInfo;}

登录成功—Header组件

登录成功展示用户信息，如图上------v-if/v-else

• Header组件(最初的)

<div class="loginList"><p>尚品汇欢迎您！</p><p><span>请</span><!-- 声明式导航 --><router-link to="/login">登录</router-link><!-- <a href="###">登录</a> --><router-link to="/register" class="register">免费注册</router-link></p>
</div>

第二个p标签是否展示则取决于是否登录，登录则获取用户信息userInfo

获取用户名信息

computed:{userName(){return this.$store.state.user.userInfo.name;}
}

若获取到userName则表示登录成功，不显示(userName)
获取不到则未登录，显示（!userName）

<div class="loginList"><p>尚品汇欢迎您！</p><!--未登录--><p v-if="!userName"><span>请</span><!-- 声明式导航 --><router-link to="/login">登录</router-link><!-- <a href="###">登录</a> --><router-link to="/register" class="register">免费注册</router-link></p><!--已经登录--><p v-else><a>{{userName}}</a><a class="register">退出登录</a></p>   
</div>

！登录完页面呈现想要效果，一刷新，一夜回到解放前，未登录状态-----Vuex非持久存储数据,token没了，

点击登录按钮派发action,拿到token存仓库，但是如果一刷新就需要重新派发action,再次拿到token

下节解决……