【Vue项目心得笔记】登录与注册（上）---token（重要）

一、注册

 静态界面

 注册代码部分

获取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、完整代码

 登录组件代码：

 src/api/index.js

//注册
export const reqUserRegister =(data)=>requests({url:`/user/passport/register`,data,method:'post'})

//登录
export const reqUserLogin = (data)=>requests({url:'/user/passport/login',data,method:'post'})

//获取用户的信息，需要带着用户的token向服务器要yoghurt信息
export const reqUserInfo = ()=>requests({url:'/user/passport/auth/getUserInfo',method:'get'})

//退出登录
export const reqLogout = ()=>requests({url:`/user/passport/logout`,method:'get'})

vuex中(src/store/user      包含注册和登录)：

import { reqGetCode ,reqUserRegister,reqUserLogin, reqUserInfo, reqLogout} from "@/api";
import {setToken,getToken,removeToken} from '@/utils/token';
//登录与注册的模块
const state={
    code:'',
    token:getToken(),
    userInfo:{}
};
const mutations={
    GETCODE(state,code){
        state.code=code;
    },
    USERLOGIN(state,token){
        state.token = token;
    },
    GETUSERINFO(state,userInfo){
        state.userInfo = userInfo
    },
    CLEARALL(state){
        //把仓库中相关用户信息清空
        state.token='',
        state.userInfo={},
        //本地存储清空
        removeToken()
    }
};
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'))
        }
    },
    //登录业务【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'))
        }
    },
    //获取用户信息
    async getUserInfo({commit}){
       let result =  await reqUserInfo()
    //    console.log(result)
       if(result.code==200){
            commit("GETUSERINFO",result.data)
            return 'ok'
        }else{
            return  Promise.reject(new Error('fail'))
        }
    },
    //退出登录
    async userLogout({commit}){
        //只是想服务器发送请求，通知服务器清除token
        let result = await reqLogout()
        //actio里面不能 *** 作state，去mutation里 *** 作
        if(result.code==200){
            commit("CLEARALL")
            return 'ok'
        }else{
            return  Promise.reject(new Error('fail'))
        }
    }
};
const getters={};
export default{
    state,
    mutations,
    actions,
    getters
}

src/utils/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")
}

header组件中：

methods: {
        //退出登录
        async logout(){
            //退出登录需要做的事情
            //1、发送请求：通知服务器退出登录：清除一些数据：token
            //2、清除项目当中的数据[useInfo，token]
           try {
              await this.$store.dispatch('userLogout');
              //回到首页
              this.$router.push("/home")
           } catch (error) {
               
           }
        }
    },

在home组件中：

    mounted(){
        //派发actions，获取floor组件的数据
        this.$store.dispatch('getFloorList')
        //获取用户信息在首页展示
        this.$store.dispatch('getUserInfo')
    },

三、存在的问题

1、多个组件展示用户信息需要在每一个组件的mouted中触发。

2、用户已经登录了，就不应该会有登录页面了。