Vue —— 注册、登录

注意点

• assets 文件夹：组件共用的静态资源
• CSS 中可以写 @(src别名) ==> ~@
• token 令牌需要持久化存储 ==> 本地存储
• 导航守卫
  • 用户已经登录了，就不能再回到登录页，必须退出登录。
  • 用户没登录，就不能访问 购物车 页面。
• 登录成功后，每个组件都需要获取相应用户的信息，该怎么做？

相关接口

//注册
//获取验证码  地址：/api/user/passport/sendCode/{phone}  请求方式 get
export const reqGetCode = (phone) => requests({
   
    url:`/user/passport/sendCode/${
     phone}`,
    method: "get"
});

//注册 地址：/api/user/passport/register 请求方式 post  参数 ：phone code password
export const reqUserRegister = (data) => requests({
   
    url:'/user/passport/register',
    method: "post",
    data
});


//登录   地址：/api/user/passport/login 请求方式 post  参数 ：phone  password
export const reqUserLogin = (data)=>requests({
   
    url:'/user/passport/login',
    data,
    method:'post'
});


//登录成功后，通过 token 令牌，向服务器获取用户数据  地址：/api/user/passport/auth/getUserInfo 请求方式 get
export const reqUserInfo = () => requests({
   
    url:'/user/passport/auth/getUserInfo',
    method:'get'
});

//退出登录  地址：/api/user/passport/logout 请求方式 get
export const reqLogout = ()=> requests({
   
    url:'/user/passport/logout',
    method:'get'
});

store/user/index.js

//引入请求
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, data) {
   
        state.code = data;
    },

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

    GETUSERINFO(state, data) {
   
        state.userInfo = data;
    },

    //退出登录，清除数据（仓库和本地）
    CLEAR(state, data){
   
        state.token = '';
        state.userInfo = {
   };
        removeToken();
    }
};
const actions = {
   
    //获取验证码
    async getCode({
     commit }, phone) {
   
        let result = await reqGetCode(phone);
        if (result.code == 200) {
   
            commit("GETCODE", result.data)
            return 'ok'
        } else {
   
            return Promise.reject(new Error('faile'))
        }
    },

    //用户注册
    async userRegister({
     commit }, user) {
   
        let result = await reqUserRegister(user);
        if (result.code == 200) {
   
            return 'ok';
        } else {
   
            return Promise.reject(new Error('faile'))
        }
    },

    //用户登录
    async userLogin({
     commit }, data) {
   
        let result = await reqUserLogin(data);
        if (result.code == 200) {
   
            //token：令牌，用户的唯一标识
            commit("USERLOGIN", result.data.token);
            //持久化存储 token ==> 本地存储
            setToken(result.data.token)
            return 'ok'
        } else {
   
            return Promise.reject(new Error('faile'));
        }
    },

    //用户登录成功，通过 token 获取用户信息
    async getUserInfo({
     commit }) {
   
        let result = await reqUserInfo();

        if (result.code == 200) {
   
            //提交用户信息
            commit("GETUSERINFO", result.data);
            return 'ok';
        }else{
   
            return Promise.reject(new Error('faile'));
        }
    },


    //退出登录
    async userLogout({
    commit}){
   
        //向服务器发请求，通知服务器清除 token
        let result = await reqLogout();
        if(result.code == 200){
   
            //还需清除本地记录
            commit("CLEAR");
            return 'ok';
        }else{
   
            return Promise.reject(new Error('faile'));
        }
    }

};
const getters = {
   };
export default {
   
    state,
    mutations,
    actions,
    getters,
}

utils/token.js

//存储token
export const setToken = (token) => {
   
    localStorage.setItem("TOKEN",token)
}

//获取token
export const getToken = () =>{
   
    return localStorage.getItem("TOKEN")
}

//清除token
export const removeToken = () =>{
   
    return localStorage.removeItem("TOKEN")
}

Header.vue

<template>
......
//当 userName 不存在，说明没登录
<p v-if="!userName">
	<span>请</span>