【Vue2项目(尚品汇前台)】(七）Pay支付、Person个人中心模块搭建

一、导航守卫

全局守卫：前置守卫（在路由跳转之间进行判断） to：可以获取到你要跳转到哪个路由信息 from：可以获取到你从哪个路由而来的信息
next：放行函数 next（）放行 next（path）放行到指定路由

放行的条件首先是要看登没登陆，所以要先识别token
从store获取token，在router.js文件中引入

import store from "@/store";

//全局守卫：前置守卫（在路由跳转之间进行判断）
router.beforeEach(async(to, from, next) => {
   
    // to and from are both route objects. must call `next`.
    //获取仓库中的token-----可以确定用户是登录了
    let token = store.state.user.token;
    let name = store.state.user.userInfo.name;
    //用户登录了
    if (token) {
   
        //已经登录而且还想去登录------不行
        if (to.path == "/login" || to.path == "/register") {
   
            next("/home");
        } else {
   
            //已经登陆了,访问的是非登录与注册
            //登录了且拥有用户信息放行
            if (name) {
   
                next();
            } else {
   
                //登陆了且没有用户信息
                //在路由跳转之前获取用户信息且放行
                try {
   
                    //获取用户信息
                    await store.dispatch("getUserInfo");
                    next();
                } catch (error) {
   
                    //token失效从新登录
                    //清除token
                    await store.dispatch("logout");
                    // 回到登录页
                    this.$router.push("/login");
                }
            }
        }
    } else {
   
        //未登录：不能去交易相关、不能去支付相关【pay|paysuccess】、不能去个人中心
        //未登录去上面这些路由-----登录
        let toPath = to.path;
        if (toPath.includes("/trade") || toPath.includes("/pay") || toPath.includes("/center")) {
   
            //把未登录的时候向去而没有去成的信息，存储于地址栏中【路由】
            next("/login?redirect=" + toPath);
            // console.log(toPath);
        } else {
   
            //去的不是上面这些路由（home|search|shopCart）---放行
            next();
        }
    }
});

守卫的多种情况：
已经登录了：

1. 已经登录了还想转跳到登录（不能放行）
2. 已经登录了还想转跳到非登录和注册（不能放行）
3. 登录了且拥有用户信息（放行）
4. 登录了但是没有用户信息，进行判断，获取到了用户信息（放行），没获取到（放回到登录页）

未登录：

1. 不能去交易支付等页面，还有个人中心
2. 把未登录的时候向去而没有去成的信息，存储于地址栏中【路由】next("/login?redirect=" + toPath);，这一点很妙，多看看

二、交易页面的静态导入

这里很简单，就跳过了

给购物车里的结算添加转跳

<div class="sumbtn">
      <router-link class="sum-btn" to="/trade">结算</router-link>
</div>

三、获取、渲染交易页数据

1. 写api

//获取用户地址信息
//URL:/api/user/userAddress/auth/findUserAddressList  method:get
export const reqAddressInfo = () =>
    requests({
   
        url: "/user/userAddress/auth/findUserAddressList/",
        method: "get"
    });
//获取商品清单
//URL:/api/order/auth/trade   method:get
export const reqOrderInfo = () =>
    requests({
   
        url: "/order/auth/trade",
        method: "get"
    });

2. 写仓库Trade.js

import {
    reqAddressInfo, reqOrderInfo } from "@/api";

const actions = {
   
    //获取用户地址信息
    async getUserAddress({
     commit }) {
   
        let result = await reqAddressInfo();
        // console.log(result);
        if (result.code == 200) {
   
            commit("GETUSERADDRESS", result.data);
        }
    },
    //获取商品清单数据
    async getOrderInfo({
     commit }) {
   
        let result = await reqOrderInfo();
        if (result.code == 200) {
   
            commit("GETORDERINFO", result.data);
        }
    },
};
const mutations = {
   
    GETUSERADDRESS(state, address) {
   
        state.address = address;
    },
    GETORDERINFO(state, orderInfo) {
   
        state.orderInfo = orderInfo;
    },
};
const state = {
   
    address: [],
    orderInfo: {
   },
};
const getters = {
   };
export default {
   
    actions,
    mutations,
    state,
    getters,
};

3. 在支付Trade.html页面派发action

mounted() {
   
    this