oneos-v5/backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端：整理首页

Browse Source 
前端：修复订单列表和详情价格展示错误
前端：H5 页面的登陆拦截补充
后端 + 前端：增加 refreshToken 刷新 accessToken
This commit is contained in:
YunaiV
2019-04-22 19:11:23 +08:00
parent 3e156b18ee
commit f46a4f7010
28 changed files with 292 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
mobile-web/src/config/request.js
View File

@@ -1,8 +1,9 @@
import axios from 'axios'
import {baseUrl, dataSources} from './env';
import datas from '../data/data';
import { getAccessToken } from '../utils/cache.js';
import { getAccessToken, getRefreshToken } from '../utils/cache.js';
import { Dialog } from 'vant';
import {setLoginToken} from "../utils/cache";
const serviceRouter = function(requestUrl) {
function getConfig() {
@@ -75,8 +76,9 @@ const serviceRouter = function(requestUrl) {
// });
// }
// }
const config = getConfig();
// TODO 芋艿，临时加下。
// const createServer = doCreateServer(config);
const indexOf = requestUrl.indexOf("/", 1);
const _urlPrefix = requestUrl.substring(0, indexOf);
@@ -130,9 +132,10 @@ const servicef = function (parameter) {
return service(parameter);
};
service.interceptors.request.use(
config => {
// 记录下原始请求的地址
config.originUrl = config.url;
// Do something before request is sent
// if (store.getters.token) {
// // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
@@ -144,7 +147,8 @@ service.interceptors.request.use(
let url = config.url = config.url.replace(`${prefix}`, target);
// TODO 芋艿，这些 url 不用增加认证 token 。可能这么写，有点脏，后面看看咋优化下。
if (url.indexOf('user-api/users/passport/mobile/send_register_code') !== -1
|| url.indexOf('user-api/users/passport/mobile/register') !== -1) {
|| url.indexOf('user-api/users/passport/mobile/register') !== -1
|| url.indexOf('user-api/users/passport/refresh_token') !== -1) {
return config;
}
@@ -152,7 +156,6 @@ service.interceptors.request.use(
if (getAccessToken()) {
config.headers['Authorization'] = `Bearer ${getAccessToken()}`;
}
return config
},
error => {
@@ -162,6 +165,30 @@ service.interceptors.request.use(
}
);
function refreshToken(lastResponse) {
// TODO 芋艿，可能会存在多个异步 callback 的情况。
let refreshToken = getRefreshToken();
return servicef({
url: '/user-api/users/passport/refresh_token',
method: 'post',
params: {
refreshToken
}
}).then(data => {
// 设置新的 accessToken
setLoginToken(data.accessToken, data.refreshToken);
// 重新发起请求
let config = lastResponse.config;
return servicef({
url: config.originUrl,
method: config.method,
params: {
...config.params,
}
});
});
}
// response interceptor
service.interceptors.response.use(
//response => response,
@@ -194,7 +221,11 @@ service.interceptors.response.use(
// TODO token 过期
// TODO 需要拿 refresh token 置换
if (code === 1001001012) {
if (code === 1001001011 // 访问令牌不存在
|| code === 1001001013 // 访问令牌已失效
|| code === 1001001021 // 刷新令牌不存在
|| code === 1001001022 // 刷新令牌已过期
|| code === 1001001023) { // 刷新令牌已失效
Dialog.confirm({
title: '系统提示',
message: res.message,
@@ -210,6 +241,8 @@ service.interceptors.response.use(
}
}
});
} else if (code === 1001001012) { // 访问令牌已过期
return refreshToken(response);
} else {
Dialog.alert({
title: '系统提示',

27
mobile-web/src/config/router.js
View File

@@ -66,21 +66,24 @@ const routes = [
path: '/user/address',
component: () => import('../page/user/address/list'),
meta: {
title: '我的地址'
title: '我的地址',
requireAuth: true,
}
},
{
path: '/user/address/edit',
component: () => import('../page/user/address/edit'),
meta: {
title: '修改地址'
title: '修改地址',
requireAuth: true,
}
},
{
path: '/user/favorite',
component: () => import('../page/user/favorite/list'),
meta: {
title: '我的收藏'
title: '我的收藏',
requireAuth: true,
}
},
{
@@ -102,21 +105,24 @@ const routes = [
path: '/user/order/:id',
component: () => import('../page/user/order/list'),
meta: {
title: '我的订单'
title: '我的订单',
requireAuth: true,
}
},
{
path: '/user/order/info/:id',
component: () => import('../page/user/order/info'),
meta: {
title: '我的订单'
title: '我的订单',
requireAuth: true,
}
},
{
path: '/user/order/logistics/:id',
component: () => import('../page/user/order/logistics'),
meta: {
title: '订单追踪'
title: '订单追踪',
requireAuth: true,
}
},
{
@@ -172,7 +178,8 @@ const routes = [
name: 'cart',
component: () => import('../page/cart/index'),
meta: {
title: '购物车'
title: '购物车',
requireAuth: true,
}
},
{
@@ -187,7 +194,8 @@ const routes = [
path: '/order/success',
component: () => import('../page/shipping/order-success'),
meta: {
title: '确认订单'
title: '确认订单',
requireAuth: true,
}
},
{
@@ -208,7 +216,8 @@ const routes = [
path: '/pay',
component: () => import('../page/pay/index'),
meta: {
title: '收银台'
title: '收银台',
requireAuth: true,
}
}
];

55
mobile-web/src/page/page/index.vue
View File

@@ -12,15 +12,37 @@
</a>
</van-swipe-item>
</van-swipe>
<van-panel title="新品推荐">
<van-row style="text-align: center">
<van-col span="8">
<router-link to="/category">
<van-icon name="http://static.iocoder.cn/icons8-medium-priority-45.png"/>
<div style="font-size:12px;margin-top: -10px;">分类</div>
</router-link>
</van-col>
<van-col span="8">
<router-link to="/category">
<van-icon name="http://static.iocoder.cn/icons8-sun-45.png" />
<div style="font-size:12px;margin-top: -10px;">热卖</div>
</router-link>
</van-col>
<van-col span="8">
<router-link to="/category">
<van-icon name="http://static.iocoder.cn/icons8-new-45.png" />
<div style="font-size:12px;margin-top: -10px;">新品</div>
</router-link>
</van-col>
</van-row>
<van-panel title="新品推荐" >
<!-- <product :data="productRecommends['1']" ></product>-->
<div v-for="(product,i) in productRecommends['1']" :key="i">
<div style="height: 70px;" v-for="(product,i) in productRecommends['1']" :key="i">
<product-card :product='product' @click="showProduct(product)" />
</div>
</van-panel>
<van-panel title="热卖推荐">
<div v-for="(product,i) in productRecommends['2']" :key="i">
<div style="height: 70px;" v-for="(product,i) in productRecommends['2']" :key="i">
<product-card :product='product' @click="showProduct(product)" />
</div>
</van-panel>
@@ -28,21 +50,20 @@
</div>
</template>
<script>
import "../../assets/style/index.css";
import whitespace from "../../components/page/whitespace.vue";
import pageLine from "../../components/page/line.vue";
import pageText from "../../components/page/text.vue";
import notice from "../../components/page/notice.vue";
import search from "../../components/page/search.vue";
import pageTitle from "../../components/page/title.vue";
import cube from "../../components/page/cube.vue";
import imageAd from "../../components/page/imageAd.vue";
import imageText from "../../components/page/imageText.vue";
import product from "../../components/page/product.vue";
import { GetPage } from "../../api/page.js";
import { getBannerList, getProductRecommendList } from '../../api/promotion.js';
import "../../assets/style/index.css";
import whitespace from "../../components/page/whitespace.vue";
import pageLine from "../../components/page/line.vue";
import pageText from "../../components/page/text.vue";
import notice from "../../components/page/notice.vue";
import search from "../../components/page/search.vue";
import pageTitle from "../../components/page/title.vue";
import cube from "../../components/page/cube.vue";
import imageAd from "../../components/page/imageAd.vue";
import imageText from "../../components/page/imageText.vue";
import product from "../../components/page/product.vue";
import {getBannerList, getProductRecommendList} from '../../api/promotion.js';
export default {
export default {
name:"page",
components:{
whitespace,

16
mobile-web/src/page/product/detail.vue
View File

@@ -174,6 +174,7 @@
import {getProductSpuInfo} from '../../api/product';
import {addCart, countCart, getCartCalcSkuPrice} from '../../api/order';
import {Dialog} from 'vant';
import {checkLogin} from "../../utils/cache";
export default {
components: {},
@@ -316,6 +317,13 @@
});
},
onAddCartClicked(data) {
if (!checkLogin()) {
Dialog.alert({
title: '系统提示',
message: '未登陆用户，暂时不支持使用购物车',
});
return;
}
const { selectedNum } = data;
// debugger;
addCart(data.selectedSkuComb.id,selectedNum).then(data => {
@@ -398,9 +406,11 @@
this.doCalcSkuPrice(this.initialSku.id);
});
// 获得购物车数量
countCart().then(data => {
this.cartCount = data;
})
if (checkLogin()) {
countCart().then(data => {
this.cartCount = data;
})
}
}
};
</script>

12
mobile-web/src/page/user/order/info.vue
View File

@@ -39,15 +39,16 @@
</van-cell-group>
<div style="height:15px;"></div>
<van-cell-group class="total">
<van-cell title="商品总额" :value="orderInfo.price"/>
<van-cell title="运费" :value="'+' + orderInfo.logisticsPrice / 100"/>
<van-cell title="实付金额" :value="orderInfo.payAmount" style="font-weight: 700;"/>
<van-cell title="商品总额" :value="orderInfo.buyPrice / 100.0"/>
<van-cell title="运费" :value="'+' + orderInfo.logisticsPrice / 100.0"/>
<van-cell title="折扣" :value="- orderInfo.discountPrice / 100.0"/>
<van-cell title="实付金额" :value="orderInfo.presentPrice / 100.0" style="font-weight: 700;"/>
</van-cell-group>
<div class="footer">
<div class="munu">
<van-button v-if="orderInfo.status === 3 " size="small">退货</van-button>
<van-button v-if="orderInfo.status === 3 " size="small" v-on:click="clickConfirmReceiving(orderId)">确认收货</van-button>
<van-button v-if="orderInfo.status === 1 " size="small" type="danger">支付</van-button>
<van-button v-if="orderInfo.status === 1 " size="small" type="danger" @click="goPay(orderInfo.id)">支付</van-button>
</div>
</div>
</div>
@@ -88,6 +89,9 @@
this.queryOrderPage(this.queryParams)
})
},
goPay(itemId) {
this.$router.push('/pay?appId=POd4RC6a&orderId=' + itemId + '&returnUrl=' + encodeURI('/user/order/info/' + itemId));
},
},
mounted() {
const { id } = this.$route.params;

4
mobile-web/src/page/user/order/list.vue
View File

@@ -33,7 +33,7 @@
</router-link>
</div>
<div slot="footer" class="footer">
<span class="total">总价：{{item.payAmount / 100}} 元</span>
<span class="total">总价：{{item.presentPrice / 100}} 元</span>
<router-link :to="'/user/order/logistics/'+item.orderid">
<van-button v-if="[3,4,5].indexOf(item.status) != -1" size="small">查看物流</van-button>
</router-link>
@@ -114,7 +114,7 @@
state: `${statusArray[order.status]}`,
status: order.status,
products,
payAmount: order.payAmount,
presentPrice: order.presentPrice,
};
});

29
mobile-web/src/utils/cache.js
View File

@@ -3,32 +3,41 @@
// localStorage 操作
const cacheKeys = {
accessTokenKey: 'accessToken',
refreshTokenKey: 'refreshToken',
ACCESS_TOKEN: 'accessToken',
REFRESH_TOKEN: 'refreshToken',
};
///
/// 设置 loginToken，分为 accessToken 和 refreshToken
export function checkLogin() {
let accessToken = getAccessToken();
return accessToken && accessToken.length > 0;
}
export function setLoginToken(accessToken, refreshToken) {
setLocalStorage(cacheKeys.accessTokenKey, accessToken);
setLocalStorage(cacheKeys.refreshTokenKey, refreshToken);
setLocalStorage(cacheKeys.ACCESS_TOKEN, accessToken);
setLocalStorage(cacheKeys.REFRESH_TOKEN, refreshToken);
}
export function getLoginToken() {
const res = {};
res[cacheKeys.accessTokenKey] = getLocalStorage(cacheKeys.accessTokenKey);
res[cacheKeys.refreshTokenKey] = getLocalStorage(cacheKeys.refreshTokenKey);
res[cacheKeys.ACCESS_TOKEN] = getLocalStorage(cacheKeys.ACCESS_TOKEN);
res[cacheKeys.REFRESH_TOKEN] = getLocalStorage(cacheKeys.REFRESH_TOKEN);
return res;
}
export function clearLoginToken() {
removeLocalStorage(cacheKeys.accessTokenKey);
removeLocalStorage(cacheKeys.refreshTokenKey);
removeLocalStorage(cacheKeys.ACCESS_TOKEN);
removeLocalStorage(cacheKeys.REFRESH_TOKEN);
}
export function getAccessToken() {
return getLocalStorage(cacheKeys.accessTokenKey);
return getLocalStorage(cacheKeys.ACCESS_TOKEN);
}
export function getRefreshToken() {
return getLocalStorage(cacheKeys.REFRESH_TOKEN);
}
///
@@ -56,4 +65,4 @@ function removeLocalStorage(key) {
} catch (e) {
throw new Error(`localStorage 设置错误! ${e}`);
}
}
}