userinfo-init

.env

@@ -1,2 +1,2 @@
-VUE_APP_BASE_API=/oneportal
+VUE_APP_BASE_API=/api
 VUE_APP_publicPath=/

.env.development

@@ -1 +1 @@
-VUE_APP_Target=http://192.168.100.254:9300/
+VUE_APP_Target=http://182.92.160.141:9002/

package.json

@@ -14,7 +14,6 @@
     "js-cookie": "^2.2.1",
     "js-md5": "^0.7.3",
     "vue": "^2.6.10",
-    "vue-baidu-map": "^0.21.22",
     "vue-class-component": "^7.0.2",
     "vue-i18n": "^8.15.3",
     "vue-property-decorator": "^8.3.0",
@@ -43,4 +42,4 @@
     "typescript": "~3.5.3",
     "vue-template-compiler": "^2.6.10"
   }
-}
+}

src/api/user.ts

@@ -1,9 +1,12 @@
 import { post } from "@/utils/request";
 
-export const getUserInfo = async (token: string) => {
-  const [err, data] = await post<IUser>("", {
-    token
-  });
-  if (err) return null;
-  return data;
+export const getUserInfo = async () => {
+  const [err, { memberInfo }] = await post<{ memberInfo: IUser }>(
+    "/member/info/getMemberInfo"
+  );
+  return err ? null : memberInfo;
+};
+export const getToken = async (login: ILogin) => {
+  const [, { token = "" }] = await post("/member/info/memberLogin", login);
+  return token as string;
 };

src/layout/components/header.vue

@@ -7,12 +7,17 @@
           <img src="@assets/home.png" alt="" srcset="" />
           首页</router-link
         >
-        <div class="login">
-          <router-link to="/login">请登录</router-link>
-        </div>
-        <div class="register">
-          <router-link to="/register">免费注册</router-link>
-        </div>
+        <span class="userinfo" v-if="userInfo">
+          欢迎您 {{ userInfo.loginAccount }}
+        </span>
+        <template v-else>
+          <div class="login">
+            <router-link to="/login">请登录</router-link>
+          </div>
+          <div class="register">
+            <router-link to="/register">免费注册</router-link>
+          </div>
+        </template>
         <div class="rightDiv">
           <div class="sjrz">
             <router-link to="/shopEnter">
@@ -69,6 +74,7 @@
 import { Component, Vue, Watch } from "vue-property-decorator";
 import langSelect from "@/components/LangSelect.vue";
 import { nav } from "@/router";
+import user from "@/store/modules/user";
 @Component({
   components: { langSelect }
 })
@@ -83,6 +89,9 @@ export default class extends Vue {
       ({ meta: { NoHeader = false } }) => NoHeader
     );
   }
+  get userInfo() {
+    return user.UserInfo;
+  }
 }
 </script>
 

src/main.ts

@@ -7,12 +7,6 @@ import "./styles/index.scss";
 import request from "./utils/request";
 import message from "./utils/message";
 import i18n from "@/lang";
-import BaiduMap from "vue-baidu-map";
-
-Vue.use(BaiduMap, {
-  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
-  ak: "QIDnjG9kDzzqrpSPfxhBxqauADXpMsX9"
-});
 Vue.use(elementUI, {
   i18n: (key: string, value: string) => i18n.t(key, value)
 });

src/router/index.ts

@@ -61,28 +61,15 @@ const router = new VueRouter({
           component: () => import("../views/account/findPassword.vue"),
           meta: { title: "findPassword", NoHeader: true }
         },
-        {
-          path: "/user/editPassword",
-          component: () => import("../views/account/user/editPassword.vue"),
-          meta: { title: "editPassword" }
-        },
         {
           path: "/user",
           component: () => import("../views/account/user/index.vue"),
-          // meta: { title: "user" },
-          redirect: "/user/collect",
-          children: [
-            {
-              path: "collect",
-              component: () => import("../views/account/user/collect.vue"),
-              meta: { title: "collect" }
-            },
-            {
-              path: "issue",
-              component: () => import("../views/account/user/issue.vue"),
-              meta: { title: "issue" }
-            }
-          ]
+          meta: { title: "user", auth: true }
+        },
+        {
+          path: "/user/editPassword",
+          component: () => import("../views/account/user/editPassword.vue"),
+          meta: { title: "editPassword", auth: true }
         },
         {
           path: "/shop/:sid",
@@ -165,36 +152,22 @@ const router = new VueRouter({
 
 let loading: any;
 router.beforeEach(async (to, from, next) => {
-  const { token } = to.query;
-  if (typeof token === "string") {
-    await user.setToken(token);
-    return next(login.get());
-  }
-  if (user.Token && !user.UserInfo) {
-    await user.getUserInfo();
-  }
-  let errCode = 0;
-  if (!to.matched.length) errCode = 404;
-  if (to.path.startsWith("/user") && !user.UserInfo) errCode = 401;
-  if (user.UserInfo === null && to.matched.some(({ meta: { auth } }) => auth)) {
-    Message.warning("请先登录！");
-    return next(false);
-  }
   loading = Loading.service({
     fullscreen: true,
     text: "跳转中..."
   });
-  // if (errCode)
-  //   return next({
-  //     path: `/error/${errCode}`,
-  //     replace: true
-  //   });
+  setTimeout(() => loading.close(), 3e3);
+  if (user.Token && !user.UserInfo) {
+    await user.getUserInfo();
+  }
+  if (!to.matched.length && process.env.NODE_ENV !== "development")
+    return next({
+      path: `/error/404`,
+      replace: true
+    });
+  if (to.meta.auth && !user.UserInfo) return next("/login");
   setPageTitle(to.meta.title);
   next();
 });
-router.afterEach((to, from) =>
-  setTimeout(() => {
-    loading.close();
-  })
-);
+router.afterEach(() => loading.close());
 export default router;

src/store/modules/user.ts

@@ -6,7 +6,7 @@ import {
   Action
 } from "vuex-module-decorators";
 import { auth } from "@/utils/cookies";
-import { getUserInfo } from "@/api/user";
+import { getUserInfo, getToken } from "@/api/user";
 import store from "../index";
 
 @Module({ dynamic: true, store, name: "user" })
@@ -15,24 +15,21 @@ class User extends VuexModule {
   public UserInfo: IUser | null = null;
   @Action
   public async getUserInfo() {
-    if (!this.Token) return null;
-    const userInfo = await getUserInfo(this.Token);
-    if (userInfo === null) this.clear();
-    this.setUserInfo(userInfo);
+    const userInfo = await getUserInfo();
+    if (!userInfo) return this.clear();
+    this.set_UserInfo(userInfo);
   }
   @Mutation
-  private setUserInfo(userInfo: IUser | null) {
+  private set_UserInfo(userInfo: IUser | null) {
     this.UserInfo = userInfo;
   }
   @Mutation
   private set_token(token: string) {
-    this.Token = token;
+    auth.setToken((this.Token = token));
   }
-  @Action
-  public setToken(token: string) {
-    if (this.UserInfo) return this.Token;
-    auth.setToken(token);
-    this.set_token(token);
+  @Action({ commit: "set_token" })
+  public async setToken(login: ILogin) {
+    return await getToken(login);
   }
   @Mutation
   public clear() {

src/types/global.d.ts

@@ -26,4 +26,13 @@ interface IResult<T> extends Array<IError | null | T> {
   length: 2;
 }
 
-interface IUser {}
+interface IUser {
+  id: Number;
+  loginAccount: string;
+  phone: string;
+}
+interface ILogin {
+  loginAccount: string;
+  loginPassword: string;
+  validateCode: string;
+}

src/utils/request.ts

@@ -5,18 +5,23 @@ import { Message } from "@/utils/message";
 import md5 from "js-md5";
 const instance = axios.create({
   baseURL: process.env.VUE_APP_BASE_API,
-  timeout: 5000
+  timeout: 3000
+  // withCredentials: true
 });
 const appKey = "cd72c223-923f-44a3-aede-b9f07dcd56b8";
 const plat = "steelfurniture";
 const v = "1.0";
 instance.interceptors.request.use(
-  ({ headers: { timestamp = Date.now(), ...h }, ...x }) => ({
+  ({
+    headers: { timestamp = Date.now(), token = user.Token, ...h },
+    ...x
+  }) => ({
     headers: {
       timestamp,
       appKey,
       plat,
       v,
+      token,
       sign: md5(`timestamp${timestamp}plat${plat}v${v}appKey${appKey}`),
       ...h
     },
@@ -51,17 +56,11 @@ export const get: IRequest = async <T>(url: string, params: any) => {
   const { data } = await instance.get<IBaseResult<T>>(url, { params });
   return getResult<T>(data);
 };
-export const post_auth: IRequest = async <T>(url: string, params: any) =>
-  await post<T>(url, Object.assign({}, params, { token: user.Token }));
-export const get_auth: IRequest = async <T>(url: string, params: any) =>
-  await get<T>(url, Object.assign({}, params, { token: user.Token }));
 export default {
   install(vue: typeof Vue) {
     Object.assign(vue.prototype, {
       $get: get,
-      $post: post,
-      $get_auth: get_auth,
-      $post_auth: post_auth
+      $post: post
     });
   }
 };

src/views/account/login.vue

@@ -17,7 +17,7 @@
               <el-input
                 class="fr"
                 placeholder="用户名(支持手机号)"
-                v-model="form.username"
+                v-model="form.loginAccount"
               >
               </el-input>
             </div>
@@ -27,7 +27,7 @@
                 class="fr"
                 type="password"
                 placeholder="密码"
-                v-model="form.password"
+                v-model="form.loginPassword"
               >
               </el-input>
             </div>
@@ -37,20 +37,20 @@
                 <el-input
                   class="fr"
                   placeholder="验证码"
-                  style="width:89%;"
-                  v-model="form.yzm"
+                  style="width:88%;"
+                  v-model="form.validateCode"
                 >
                 </el-input>
               </div>
               <div class="yzm">
-                <img src="@assets/yzm.png" alt="" />
+                <img :src="verifyImg" @click="setVerifyImg" alt="" />
               </div>
             </div>
             <div class="checkBoxDiv">
               <el-checkbox v-model="form.zddl">自动登录</el-checkbox>
             </div>
             <div>
-              <el-button class="loginBtn">登录</el-button>
+              <el-button class="loginBtn" @click="submit">登录</el-button>
             </div>
             <div class="newDiv">
               <router-link class="forgetPass" to="/findPassword"
@@ -67,23 +67,30 @@
     </div>
   </div>
 </template>
-<script>
+<script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
-export default {
-  name: "app",
-  components: {},
-  data() {
-    return {
-      form: {
-        username: "",
-        password: "",
-        yzm: "",
-        zddl: false
-      }
-    };
-  },
-  methods: {}
-};
+import user from "@/store/modules/user";
+@Component
+export default class extends Vue {
+  private verifyImg = "";
+  private form: ILogin = {
+    loginAccount: "",
+    loginPassword: "",
+    validateCode: ""
+  };
+  created() {
+    this.setVerifyImg();
+  }
+  private setVerifyImg() {
+    this.verifyImg = `/api/captcha/info/captchaImage?t=${Date.now()}`;
+  }
+  async submit() {
+    const token = await user.setToken(this.form);
+    if (!token) return this.setVerifyImg();
+    this.$message.success("登陆成功");
+    this.$router.push("/user"); //.catch(x => console.log("route error -", x));
+  }
+}
 </script>
 <style lang="scss" scoped>
 .topDiv {

src/views/account/register.vue

@@ -17,7 +17,7 @@
               <el-input
                 class="fr"
                 placeholder="登录账号"
-                v-model="form.username"
+                v-model="form.loginAccount"
               >
               </el-input>
             </div>
@@ -27,7 +27,7 @@
                 class="fr"
                 type="password"
                 placeholder="登录密码"
-                v-model="form.password"
+                v-model="form.loginPassword"
               >
               </el-input>
             </div>
@@ -39,24 +39,19 @@
             <div class="yzmDiv">
               <div class="inputDiv per70">
                 <img src="@assets/yz.png" alt="" />
-                <el-input
-                  class="fr"
-                  placeholder="验证码"
-                  style="width:89%;"
-                  v-model="form.yzm"
-                >
+                <el-input class="fr" placeholder="验证码" style="width:88%;">
                 </el-input>
               </div>
               <div class="yzm">获取验证码</div>
             </div>
             <div class="checkboxDiv">
-              <el-checkbox v-model="form.zddl">我已阅读并同意</el-checkbox
+              <el-checkbox v-model="flag">我已阅读并同意</el-checkbox
               ><a class="xieyi" href="javascript:;"
                 >《用户服务协议和平台免责条款》</a
               >
             </div>
             <div>
-              <el-button class="loginBtn">注册</el-button>
+              <el-button class="loginBtn" @click="submit">注册</el-button>
             </div>
           </div>
         </el-col>
@@ -64,24 +59,22 @@
     </div>
   </div>
 </template>
-<script>
+<script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
-export default {
-  name: "app",
-  components: {},
-  data() {
-    return {
-      form: {
-        username: "",
-        password: "",
-        yzm: "",
-        zddl: false,
-        phone: ""
-      }
-    };
-  },
-  methods: {}
-};
+@Component
+export default class extends Vue {
+  private flag = false;
+  private form = {
+    loginAccount: "",
+    loginPassword: "",
+    phone: ""
+  };
+
+  async submit() {
+    const [err] = await this.$post("/member/info/userRegister", this.form);
+    if (!err) return this.$message.success("注册成功");
+  }
+}
 </script>
 <style lang="scss" scoped>
 .topDiv {
@@ -159,18 +152,18 @@ export default {
   .checkboxDiv {
     margin-top: 2rem;
   }
-  div {
-    .loginBtn {
-      width: 100%;
-      background: #fd5522;
-      color: #fff;
-      border-color: #fd5522;
-      margin-top: 2rem;
-    }
-    .xieyi {
-      color: #fd5522;
-    }
+
+  .loginBtn {
+    width: 100%;
+    background: #fd5522;
+    color: #fff;
+    border-color: #fd5522;
+    margin-top: 2rem;
+  }
+  .xieyi {
+    color: #fd5522;
   }
+
   .newDiv {
     height: 4rem;
     line-height: 4rem;

src/views/account/user/collect.vue

@@ -1,10 +0,0 @@
-<template>
-  <div>
-    我的关注
-  </div>
-</template>
-<script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
-@Component
-export default class extends Vue {}
-</script>

src/views/account/user/issue.vue

@@ -1,10 +0,0 @@
-<template>
-  <div>
-    我的需求
-  </div>
-</template>
-<script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
-@Component
-export default class extends Vue {}
-</script>

vue.config.js

@@ -14,10 +14,10 @@ module.exports = {
     proxy: {
       [process.env.VUE_APP_BASE_API]: {
         target: process.env.VUE_APP_Target,
-        changeOrigin: true
-        // pathRewrite: {
-        //   ["^" + process.env.VUE_APP_BASE_API]: ""
-        // }
+        changeOrigin: true,
+        pathRewrite: {
+          ["^" + process.env.VUE_APP_BASE_API]: ""
+        }
       }
     }
   }