Vue e-commerce プロジェクト -- ナビゲーション ガード

航海警備員は理解しています

ナビゲーションガード

ナビゲーション: ルートが変更を送信していることを示し、ルートがジャンプします

衛兵: あなたはそれを「紫禁城の衛兵」と呼んでいます

グローバル ガード: プロジェクトでは、ルートが変更される限り、ガードはそれを監視できます。

例: 紫禁城では、紫禁城の門にいるすべての警備員がチェックしなければなりません

OK、コードの変更を始めましょう

フロント配線ガードの 3 つのパラメータについて説明します

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

})

 to: ジャンプ先の経路情報を取得できます。

from: どのルートから来たのかを知ることができます

next: release function next() release next(path) release to コマンドルート next(false) このパスは使用できません、元のパスに戻ります

航海警備員の判断

ユーザーはログインしていてログイン ページにジャンプできませんが、他のページに移動するとトークンが消えています。ホーム ページでアクションをディスパッチしただけなので、ユーザー オブジェクトを取得する必要があります

現在のロジックでは、ログインするとユーザー情報が存在しないため、ユーザー情報が送信され、その後放されることになります。トークンが無効な場合は、トークンをクリアして再度ログインしてください

ナビガードユーザーのログイン操作

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{

    }
})

トレード静的コンポーネント

ログインアカウントを統一しますか?

13700000000 111111

まずトレード静的コンポーネントを分割し、次にルートを登録します

 そしてこのページ

私はチェックアウトボタンでこのページにジャンプします

トランザクションページデータを取得する

インターフェースの説明

/api/user/userAddress/auth/findUserAddressList

ユーザーのアドレス情報を取得する

得る

これは新しいウェアハウスを作成するための新しいモジュールです 

テストするには、このアクションをディスパッチします。成功しました

トランザクションページのユーザー情報を取得しますか?

ユーザーのアドレス情報はログイン後にのみ取得でき、ログインしないと取得することはできません。

 その後、倉庫に保管します。 

このリクエストに加えて、注文トランザクション ページの情報も取得する必要があります。

注文トランザクションページ情報を取得する

リクエストアドレス

/api/order/auth/trade

リクエストメソッド

得る

パラメータの種類

パラメータ名	タイプ	必要ですか?	説明
なし	なし	なし	なし

戻り値の例

成功：

{     「コード」: 200、     "メッセージ": "成功",     "データ"： {        "合計金額": 23996、        "ユーザーアドレスリスト": [             {                 「id」: 2、                 "userAddress": "北京昌平 2 区",                 「ユーザーID」: 2、                 "荷受人": "管理者",                 "電話番号": "15011111111",                 "isデフォルト": "1"             }         ]、         "トレードNo": "1b23c1efc8144bfc83e51807f4e71d3a",         "合計数": 1、         "詳細配列リスト": [             {                 "id": null、                 "orderId": null、                 「skuId」: 4、                 "skuName": "Apple iPhone 11 モバイル ユニコム テレコム 4G 携帯電話 デュアル SIM デュアル スタンバイ",                 "imgUrl": "http://192.168.200.128:8080/RLOAElEmAATrIT-1J9Q110.jpg",                 「注文価格」: 5999、                 「skuNum」: 4、                 "在庫あり": null             }         】     }、     「わかりました」: 本当 }

 

 注文トランザクション ページ情報を取得し、vuex に保存します

ユーザーのアドレス情報の表示

プロパティを計算して vuex からデータを取得します。

そしてページにレンダリングします 

データを取り出してページ上にレンダリングする

 ここをクリックしてください。私たちは特別な考えを持っています 

このメソッドのバインディング実装を通じて、排他的なアイデア

しかし、最終的に達成したいのは、上記のコレクター情報を選択し、その下の情報も変更する必要があるということです。

計算されたプロパティに新しいフィールドをカプセル化できます。これは、検索配列の条件を満たす要素の戻り値であり、戻り値は最終結果です。 

そしてページにレンダリングします

取引ページが完了しました

まず誤ったエラーの問題を解決してから

同様に、vuex からの順序をコンポーネントに取得します 

まずデータを取得してください 

次にページに動的にレンダリングします

この部分の内容を変更します

 終わらせる