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"

//methods
 async 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

完善仓库业务

	//state
	userInfo:''
	
	//获取用户信息
	//actions
    async getUserInfo({ commit }) {
        let result = await reqUserInfo();
        if (result.code == 200) {
            commit('GETUSERINFO', result.data);
        }
    }
    
	//mutaions
	 GETUSERINFO(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

下节解决……