Vue电商项目--导航守卫

导航守卫理解

导航 守卫

导航：表示路由正在发送改变，进行路由跳转

守卫：你把它当中‘紫禁城守卫’

全局守卫：你项目中，只要路由变化，守卫就能监听到。

举例：紫禁城【皇帝，太子】，紫禁城大门守卫全要检查

欧克，我们开始修改代码

说一下前置路由守卫的三个参数

router.beforeEach((to,from,next)=>{

})

 to:可以获取到你要跳转到那个路由信息

from:可以获取到你从哪个路由而来的信息

next:放行函数 next()放行 next(path) 放行到指令路由  next(false) 此路不通，原路返回

导航守卫的判断

用户已经登录，无法在跳转去login页面，但我们去其他页面它的token就没了。因为我们只在home页面派发了action，我们需要获取用户对象

现在的逻辑是如果你登录了，那是没有用户信息，它给你派送一个用户信息，然后放行。如果token失效了，清除token，重新登录

导航守卫用户登录操作

router.beforeEach(async (to,from,next)=>{
        next();
    let token=store.state.user.token;
    let name=store.state.user.userInfo.name;
    if(token){
        if(to.path=='/login'){
            next('/home')
        }else{
            // 如果有用户名
            if(name){
                next();
            }else{
                try {
                    // 没有用户名，派发action让仓库存储用户信息在跳转
                await store.dispatch('getUserInfo');
                next();
                } catch (error) {
                    // token过期
                    // 清除token
                    await store.dispatch('userLogout');
                    next('/login')
                }
            }
        }
    }else{

    }
})

trade静态组件

统一登录的账号？

13700000000 111111

先拆分trade静态组件，然后去注册路由

 然后是这个页面

我是结算按钮然后跳转到这个页面

获取交易页数据

接口说明

/api/user/userAddress/auth/findUserAddressList

获取用户地址信息

get

这是一个新的模块，要写一个新的仓库 

测试一下，派发这个action。成功了

获取交易页面用户信息？

用户登录了才可以获取用户地址信息，不登录没办法获取到的

 然后将他存储到仓库当中。 

除了这个请求，我们还要有获取订单交易页信息

获取订单交易页信息

请求地址

/api/order/auth/trade

请求方式

GET

参数类型

参数名称	类型	是否必选	描述
无	无	无	无

返回示例

成功：

{     "code": 200,     "message": "成功",     "data": {        "totalAmount": 23996,        "userAddressList": [             {                 "id": 2,                 "userAddress": "北京市昌平区2",                 "userId": 2,                 "consignee": "admin",                 "phoneNum": "15011111111",                 "isDefault": "1"             }         ],         "tradeNo": "1b23c1efc8144bfc83e51807f4e71d3a",         "totalNum": 1,         "detailArrayList": [             {                 "id": null,                 "orderId": null,                 "skuId": 4,                 "skuName": "Apple iPhone 11 移动联通电信4G手机 双卡双待",                 "imgUrl": "http://192.168.200.128:8080/RLOAElEmAATrIT-1J9Q110.jpg",                 "orderPrice": 5999,                 "skuNum": 4,                 "hasStock": null             }         ]     },     "ok": true }

 

 获取订单交易页信息，并存储到vuex中

用户地址信息的展示

通过计算属性，把数据从vuex中拿出来。

然后渲染到页面上 

把数据拿出来，然后渲染到页面上

 这里的点击我们有一个排他的思想 

通过这个方法的绑定实现，排他思想

但我们最终要实现的是我们选中了上面那个收集人信息，下面的信息也应该发生改变

我们可以在计算属性中封装一个新的字段，这里是find查找数组中符合条件的元素返回，返回为最终的结果 

然后渲染到页面上

交易页面完成

先解决之前一个假报错的问题

老样子，把订单从vuex中捞到组件中 

先拿数据 

然后动态的渲染到页面上

现在修改这部分的内容

 搞定