修改账号相关接口

package.json

@@ -3,8 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "dev": "cross-env MODE_ENV=development vue-cli-service serve",
+    "build:preparing": "cross-env MODE_ENV=preparing vue-cli-service build",
+    "build": "cross-env MODE_ENV=production vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
@@ -14,12 +15,14 @@
     "dayjs": "^1.11.6",
     "echarts": "^5.4.0",
     "element-ui": "^2.15.12",
+    "js-cookie": "^3.0.1",
     "pinia": "^2.0.24",
     "vue": "^2.7.14",
     "vue-router": "^3.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",
+    "@types/js-cookie": "^3.0.2",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
@@ -28,6 +31,7 @@
     "@vue/cli-service": "~5.0.0",
     "@vue/eslint-config-standard": "^6.1.0",
     "@vue/eslint-config-typescript": "^9.1.0",
+    "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-node": "^11.1.0",

src/components/common/Aside.vue

@@ -2,10 +2,10 @@
   <div class="aside">
     <div class="max">
       <div class="user-info">
-        <div class="head-photo"><p>{{ userName.slice(0, 1) }}</p></div>
+        <div class="head-photo"><p>{{ user && user.name.slice(0, 1) }}</p></div>
         <div class="info">
-          <p>{{ userName }}</p>
-          <p>{{ userName }}</p>
+          <p>{{ user && user.name }}</p>
+          <p>{{ user && user.email }}</p>
         </div>
       </div>
       <el-menu :default-active="path" active-text-color="#1460F3" text-color="#666" router>
@@ -91,7 +91,7 @@ import Support from '@/components/icon/menu_support.vue'
   }
 })
 export default class Aside extends Vue {
-  userName = loginStore().user.name
+  user = loginStore().user
   get path () {
     if (this.$route.path === '/api/keys/new-project') {
       return '/api/keys'

src/components/common/Header.vue

@@ -17,13 +17,14 @@
           <span>Log out</span>
         </div>
       </el-popover>
-      <div class="user-photo" v-popover:popover><p>{{ user.name.slice(0, 1) }}</p></div>
+      <div class="user-photo" v-popover:popover><p>{{ user && user.name.slice(0, 1) }}</p></div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
+import Cookie from 'js-cookie'
 import { loginStore } from '@/store/loginStore'
 import { apiLoginOut } from '@/request/api'
 import { storeToRefs } from 'pinia'
@@ -38,9 +39,9 @@ export default Vue.extend({
   },
   methods: {
     loginOut () {
-      apiLoginOut({}, {}).then(res => {
+      apiLoginOut({}).then(res => {
         loginStore().setAuth(false)
-        localStorage.removeItem('token')
+        Cookie.remove('access_token')
         this.$router.push('/login')
       })
     }

src/request/api.ts

@@ -1,9 +1,15 @@
 import { get, post, put, del, getWithConfig } from './http'
 
+let baseUrl = 'https://wms.compdf.com'
+if (process.env.MODE_ENV !== 'production') {
+  baseUrl = 'http://test-compdf.kdan.cn:3060'
+}
 // 登录
-export const apiLogin = (data: object, config: object) => post('/user-api/v1/user/login', data, config)
+export const apiLogin = (data: object, config: object) => post(baseUrl + '/api/user/login', data, config)
+// 获取个人信息
+export const getUserInfo = (params: object) => get(baseUrl + '/api/user/get-user-info', params)
 // 登出
-export const apiLoginOut = (data: object, config: object) => post('/user-api/v1/user/logout', data, config)
+export const apiLoginOut = (params: object) => get(baseUrl + '/api/user/sign-out', params)
 // 进度条 - 获取账户套餐余额
 export const getPackageBalance = (params: object) => get('/user-api/v1/balance/getPackageBalance', params)
 // 获取用户首次登录时间
@@ -39,7 +45,7 @@ const getAverageProcessTimeDetailedData = (params: object) => get('/user-api/v1/
 export const getExport = (params: object, config: object) => getWithConfig('/user-api/v1/convert-data/export', params, config)
 
 // security - 修改密码
-export const apiChangePassword = (data: object, config: object) => put('/user-api/v1/user/changePassword', data, config)
+export const apiChangePassword = (data: object, config: object) => post(baseUrl + '/api/user/change-password', data, config)
 
 // API Keys - 获取列表
 export const getProjectList = (params: object) => get('/user-api/v1/project/getProjectList', params)

src/request/http.ts

@@ -13,12 +13,10 @@ import router from '../router'
 const store = loginStore(pinia)
 
 // 环境的切换
-if (process.env.NODE_ENV === 'development') {
-  axios.defaults.baseURL = 'http://101.132.103.13:8088'
-} else if (process.env.NODE_ENV === 'debug') {
-  axios.defaults.baseURL = ''
-} else if (process.env.NODE_ENV === 'production') {
+if (process.env.MODE_ENV === 'production') {
   axios.defaults.baseURL = 'https://api-backend.compdf.com'
+} else {
+  axios.defaults.baseURL = 'http://101.132.103.13:8088'
 }
 
 // 请求超时时间
@@ -33,7 +31,7 @@ axios.interceptors.request.use(
   config => {
     // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
     // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
-    const token = store.user.token
+    const token = store.token
     token && (config!.headers!.Authorization = token)
     return config
   },

src/router/index.ts

@@ -1,5 +1,7 @@
 import Vue from 'vue'
 import VueRouter, { RouteConfig } from 'vue-router'
+import { loginStore } from '@/store/loginStore'
+import pinia from '@/store/index'
 import dashboard from '@/views/projects/dashboard.vue'
 import login from '@/views/login.vue'
 import security from '@/views/accountSettings/security.vue'
@@ -117,14 +119,16 @@ const router = new VueRouter({
 })
 
 // 是否登录，未登录跳转登录页
-router.beforeEach((to, from, next) => {
+router.beforeEach(async (to, from, next) => {
+  const user = loginStore().user
   if (to.path === '/login') {
     next()
   } else {
-    if (from.path === '/login' && localStorage.getItem('isAuth') === 'true') {
+    if (from.path === '/login' && user) {
       next()
     } else {
-      if (localStorage.getItem('isAuth') === 'true') {
+      debugger
+      if (user) {
         next()
       } else {
         next('/login')

src/shims-vue.d.ts

@@ -2,3 +2,5 @@ declare module '*.vue' {
   import Vue from 'vue'
   export default Vue
 }
+
+declare module 'js-cookie'

src/store/loginStore.ts

@@ -1,12 +1,14 @@
 import { defineStore } from 'pinia'
+import Cookie from 'js-cookie'
+import { getUserInfo } from '@/request/api'
 
+const rawUser = localStorage.getItem('user')
+const user = rawUser && JSON.parse(rawUser)
 export const loginStore = defineStore('login', {
   state: () => ({
     isAuthenticated: false,
-    user: {
-      name: localStorage.getItem('username') || '',
-      token: localStorage.getItem('token') || ''
-    }
+    token: Cookie.get('access_token') || '',
+    user: user || null
   }),
   getters: {
     getAuthenticated: (state) => state.isAuthenticated,
@@ -22,22 +24,25 @@ export const loginStore = defineStore('login', {
       }
       localStorage.setItem('isAuth', String(this.isAuthenticated))
     },
+    // 设置token
+    setToken (token: any) {
+      this.token = token
+      Cookie.set('access_token', this.token, { expires: 14 })
+    },
     // 获取用户信息
     setUser (user: any) {
       if (user) {
         this.user = user
-        localStorage.setItem('token', this.user.token)
       } else {
         this.user = {
-          name: '',
-          token: ''
+          name: ''
         }
       }
     },
     // 清除token
     clearToken () {
-      this.user.token = ''
-      localStorage.removeItem('token')
+      this.token = ''
+      Cookie.remove('access_token')
     }
   }
 })

src/views/accountSettings/security.vue

@@ -127,18 +127,22 @@ export default class Security extends Vue {
         this.validPassword()
         if (!this.showErrTipOld && !this.showErrTipNotMatch) {
           apiChangePassword({
-            oldPassword: crypto.get(localStorage.getItem('password')),
-            newPassword: this.ruleForm.comfirmPassword
+            old_password: crypto.get(localStorage.getItem('password')),
+            new_password: this.ruleForm.newPassword,
+            password_confirm: this.ruleForm.comfirmPassword
           }, {}).then((res: any) => {
-            if (res.code === '200') {
+            if (res.code === 200) {
               // const SECRET_PWD = crypto.set(this.ruleForm.comfirmPassword) // 加密
               // localStorage.setItem('password', SECRET_PWD)
               this.changedSuccessBox()
-            } else if (res.code === '706') {
+            } else if (res.code === 500 && res.message === 'The Password and Confirm Password do not match.') {
               this.$message.error('New password cannot be the same as your old password.')
             } else {
               this.$message.error('Changed Failed!')
             }
+          }).catch((error) => {
+            console.log(error)
+            this.$message.error('Changed Failed!')
           })
         }
       }
@@ -178,8 +182,8 @@ export default class Security extends Vue {
       const isRemenber = localStorage.getItem('isRemenber')
       if (!isRemenber) {
         localStorage.removeItem('isRemenber')
-        localStorage.removeItem('password')
       }
+      localStorage.removeItem('password')
       this.$router.replace({
         path: '/login',
         query: {

src/views/login.vue

@@ -44,7 +44,7 @@
 <script lang="ts">
 import { Vue, Component, Watch } from 'vue-property-decorator'
 import { loginStore } from '@/store/loginStore'
-import { apiLogin } from '@/request/api'
+import { apiLogin, getUserInfo } from '@/request/api'
 import crypto from '@/crypto/crypto'
 
 interface IruleForm {
@@ -69,8 +69,9 @@ export default class Login extends Vue {
   mounted () {
     const isRemenber = localStorage.getItem('isRemenber')
     if (isRemenber) {
+      const password = localStorage.getItem('password')
       this.ruleForm.email = localStorage.getItem('username') || ''
-      this.ruleForm.password = crypto.get(localStorage.getItem('password')) || ''
+      this.ruleForm.password = (password && crypto.get(password)) || ''
       this.ruleForm.isRemenber = true
     }
   }
@@ -97,7 +98,7 @@ export default class Login extends Vue {
   }
 
   // 登录
-  submitForm (formName:string) {
+  submitForm () {
     if (this.ruleForm.email === '' || this.ruleForm.password === '') {
       if (this.ruleForm.email === '') {
         this.showErrTipEmailBlank = true
@@ -108,29 +109,38 @@ export default class Login extends Vue {
       return
     }
     apiLogin({
-      username: this.ruleForm.email,
+      email: this.ruleForm.email,
       password: this.ruleForm.password
     }, {}).then((res: any) => {
-      if (res.code === '200') {
-        loginStore().setAuth(true)
-        loginStore().setUser({
-          name: res.data.username,
-          token: res.data.token
-        })
-        localStorage.setItem('username', this.ruleForm.email)
+      if (res.code === 200) {
+        loginStore().setToken(res.data.token)
         const SECRET_PWD = crypto.set(this.ruleForm.password) // 加密
         localStorage.setItem('password', SECRET_PWD)
+        localStorage.setItem('username', this.ruleForm.email)
         if (this.ruleForm.isRemenber) {
           localStorage.setItem('isRemenber', 'true')
         } else {
           localStorage.removeItem('isRemenber')
         }
-        const router = this.$router
-        router.push('/dashboard')
-      } else if (res.code === '-1') {
-        this.showErrTip = true
+        getUserInfo({}).then((res: any) => {
+          if (res.code === 200) {
+            loginStore().setAuth(true)
+            localStorage.setItem('user', JSON.stringify({
+              email: this.ruleForm.email,
+              name: res.data.full_name
+            }))
+            loginStore().setUser({
+              email: this.ruleForm.email,
+              name: res.data.full_name
+            })
+          } else {
+            this.showErrTip = true
+          }
+          const router = this.$router
+          router.push('/dashboard')
+        })
       } else {
-        this.$message.error('Failed to connect.')
+        this.showErrTip = true
       }
     }).catch(err => {
       console.log(err)