token令牌机制

全局路由拦截
封装接口请求
解润东
20211021

package-lock.json

@@ -6924,6 +6924,11 @@
       "resolved": "https://registry.npm.taobao.org/js-base64/download/js-base64-2.5.1.tgz",
       "integrity": "sha1-Hvo57yxfeYC7F4St5KivLeMpESE="
     },
+    "js-cookie": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.0.tgz",
+      "integrity": "sha1-Gywnmm7s44ChIWi5JIUmWzWx7/s="
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "http://registry.npm.taobao.org/js-levenshtein/download/js-levenshtein-1.1.6.tgz",
@@ -10061,6 +10066,11 @@
         "tslib": "^1.9.0"
       }
     },
+    "s": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/s/-/s-1.0.0.tgz",
+      "integrity": "sha512-Tz63UXhdEBvvIV6Q0a+AV2Dx1TPq+vVWNYBxyCT9TG0uqn9kySwFTjfq3C1YuGBRwYtt9Tof11L6GCKi88foqw=="
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.1.2.tgz",

package.json

@@ -2,7 +2,7 @@
   "name": "vue-newbee-shop",
   "version": "0.1.0",
   "private": true,
-  "scripts": { 
+  "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
@@ -11,10 +11,12 @@
     "axios": "^0.19.2",
     "better-scroll": "^1.15.2",
     "core-js": "^3.4.3",
+    "js-cookie": "^2.2.0",
     "js-md5": "^0.7.3",
     "lib-flexible": "^0.3.2",
     "postcss-px2rem": "^0.3.0",
     "pushstate-server": "^3.1.0",
+    "s": "^1.0.0",
     "vant": "^2.12.30",
     "vue": "^2.6.10",
     "vue-router": "^3.0.7",

src/main.js

@@ -13,6 +13,7 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import './permission'
+import Cookies from 'js-cookie'
 import { prefix } from '@/common/js/utils'
 import { Divider, Popup, Overlay, Loading, Dialog, ContactCard, Form, AddressEdit, AddressList, Field, CellGroup, Cell, SwipeCell, Icon, Stepper, Card, Checkbox, CheckboxGroup, Button, Swipe, SwipeItem, PullRefresh, List, Tab, Tabs, GoodsAction, GoodsActionIcon, GoodsActionButton, SubmitBar, Toast ,Search,Picker,Uploader,Notify ,ContactList,Calendar,Radio,RadioGroup,Tag,Tabbar,TabbarItem,Sticky, Grid, GridItem,Skeleton,Col,Row,  Image as VanImage, Badge,} from 'vant'
 import 'lib-flexible/flexible'
@@ -21,7 +22,6 @@ Vue.use(Divider).use(Popup).use(Overlay).use(Loading).use(Dialog).use(Toast).use
 .use(ContactList).use(Calendar).use(Radio).use(RadioGroup).use(Tag).use(Tabbar).use(TabbarItem).use(Sticky)
 .use(Grid).use(GridItem).use(Skeleton).use(Col).use(Row).use(VanImage)
 Vue.config.productionTip = false
-
 new Vue({
   router,
   store,

src/permission.js

 import router from './router'
 //设置白名单，指不需要登录就可以直接进入的页面
 var whiteList = ["/login2"]
+import { getToken } from '@/utils/auth' // get token from cookie
 //这里使用cookie.js，登录成功后将后台返回的token保存在cookie中
 // Cookies.set('admin_token','token_value');
-var hasToken = localStorage.getItem('admin_token');
 router.beforeEach(async(to, from, next) => {
     //to: 即将要进入的目标 [路由对象]
     //from:当前导航正要离开的路由
     //next:一定要调用该方法来 resolve 这个钩子
+    
+    const hasToken = getToken()//确定用户是否已登录
     console.log(hasToken)
      if (hasToken) {
         if (to.path === '/login2') {

src/service/table.js

@@ -6,33 +6,4 @@ export function getFun(url,params) {
 //post请求
 export function postFun(url,data) {
     return axios.post(url,data);
-}
-//post请求表格
+}
\ No newline at end of file
-export function jsonPostList(url,data) {
-    return axios.post(url,data);
-}
-// import request from '@/utils/axios'
-// /*get请求*/
-// export function getFun(url,params) {
-//     return request({
-//       url: url,
-//       method: 'get',
-//       params
-//     })
-//   }
-// /*post请求*/
-// export function postFun(url,data) {
-//     return request({
-//       url: url,
-//       method: 'post',
-//       data
-//     })
-//   }
-//   /*json表格*/
-// export function jsonPostList(url,data) {
-//     return request({
-//       url: url,
-//       method: 'post',
-//       data
-//     })
-//   }

src/utils/auth.js

+import Cookies from 'js-cookie'
+
+const TokenKey = 'Admin-Token'
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}

src/utils/axios.js

@@ -9,95 +9,56 @@
  import axios from 'axios'
  import { Toast } from 'vant'
  import router from '../router'
- 
+ import { getToken } from '@/utils/auth' // get token from cookie
  // axios.defaults.baseURL = process.env.NODE_ENV == 'development' ? 'http://backend-api-01.newbee.ltd/api/v1' : 'http://backend-api-01.newbee.ltd/api/v1'
  axios.defaults.baseURL = '/hse/app-api'
  axios.defaults.withCredentials = true
  axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
- axios.defaults.headers['token'] = localStorage.getItem('token') || ''
+ axios.defaults.headers['token'] = getToken() || ''
  axios.defaults.headers.post['Content-Type'] = 'application/json'
- axios.defaults.headers['data-Type'] = 'json'
- 
- axios.interceptors.response.use(res => {
-   if (typeof res.data !== 'object') {
-     Toast.fail('服务端异常！')
-     return Promise.reject(res)
-   }
-   if (res.data.resultCode != 200) {
-     if (res.data.message) Toast.fail(res.data.message)
-     if (res.data.resultCode == 416) {
-       router.push({ path: '/login' })
-     }
-     return Promise.reject(res.data)
-   }
  
-   return res.data
+ axios.interceptors.response.use(response => {
+    // const res = response.data//获取请求返回数据
+    // const code = response.status//获取请求响应码
+    // if (typeof res.data !== 'object') {
+    //     Toast.fail('服务端异常！')
+    //     return Promise.reject(res)
+    //   }
+    //   if (res.data.resultCode != 200) {
+    //     // if (res.data.message) Toast.fail(res.data.message)
+    //     if (res.data.resultCode == 416) {
+    //       router.push({ path: '/login2' })
+    //     }
+    //     // return Promise.reject(res.data)
+    //   }
+    const res = response.data//获取请求返回数据
+    const code = response.status//获取请求响应码
+    if(code == 200) {//请求响应码200 代表已经请求到接口
+        if(res.code === 0) {//接口响应码0 代表接口代码运行正常
+            return res
+        }else{
+            this.$notify({
+                message:'失败',
+                background:'red',
+                duration: 1000
+            })
+        }
+    }else{
+        this.$notify({
+            message:'失败',
+            background:'red',
+            duration: 1000
+        })
+        Promise.reject(new Error('Error'))
+    }
+ },err=>{
+    this.$notify({
+        message:'失败',
+        background:'red',
+        duration: 1000
+    })
+    return Promise.reject(err)
  })
  
  export default axios
- // const service = axios.create({
- //   baseURL: '/hse', //前缀路径
+ 
\ No newline at end of file
- //     headers: {//请求头部
- //         // "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
- //         "content-type": "application/json",
- //     "data-type": "json"
- //   }
- // })
- // //拦截接口请求
- // service.interceptors.request.use(config => {
- //     // if (getToken()) {
- //     //     config.headers['X-Token'] = getToken()
- //   // }
- //     return config
- // },error => {
- //     console.log(error)
- //     return Promise.reject(error)
- // })
- // //拦截接口响应
- // service.interceptors.response.use(response => {
- //     const res = response.data//获取请求返回数据
- //     const code = response.status//获取请求响应码
- //     if(code == 200) {//请求响应码200 代表已经请求到接口
- //         if(res.rtnCode === 500) {//接口响应码500 代表接口代码运行异常
- //             Toast.fail('服务端异常！')
- //             return Promise.reject(new Error('Error'))//异步函数 报错
- //         }
- //         if(res.rtnCode === 5000) {//接口响应码500 代表接口代码运行异常
- //             Toast.fail('服务端异常！')
- //             return Promise.reject(new Error('Warning'))//异步函数 报错
- //         }
- //         if(res.code === 403) {//接口响应码403 代表token令牌失效
- //             this.$dialog.confirm({
- //                 title: '提示',
- //                 message: '登录超时，请重新登录',
- //             })
-             
- //             .then(() => {
- //               store.dispatch('user/resetToken').then(() => {
- //                 location.reload()
- //               })
- //             })
- //         } else {
- //             return res//请求返回数据
- //         }
- //     } else {
- //         Toast.fail('服务端异常！')
- //         if(code === 500) {//接口响应码500 代表接口代码运行异常
- //             this.$dialog.confirm({
- //                 title: '提示',
- //                 message:'您已经退出，您可以取消停留在这个页面，或重新登录', 
- //             }).then(() => {
- //                 store.dispatch('user/resetToken').then(() => {
- //                     this.$router.push({path:'/login'})
- //                 })
- //             })
- //         }
- //         return Promise.reject(new Error('Error'))
- //     }
- // },error => {
- //     console.log('err' + error)
- //     Toast.fail('服务端异常！')
- //     return Promise.reject(error)
- // })
- 
- // export default service
\ No newline at end of file

src/views/Login2.vue

@@ -50,7 +50,8 @@
 </template>
 
 <script>
-import { getFun ,postFun} from '@/service/table'
+import { getFun } from '@/service/table'
+import { setToken } from '@/utils/auth'
 export default {
   data() {
     return {
@@ -60,21 +61,26 @@ export default {
       password: ""
     };
   },
-  mounted() {},
+  mounted() {
+  },
   methods: {
-    async onSubmit(values) {
+     onSubmit(values) {
         if(values.username=='admin'&&values.password=='123456'){
-            this.$notify({
-                message:'成功',
-                background:'green',
-                duration: 1000
-            })
-            await getFun('check/token').then((response)=>{
-                console.log(response)
+            getFun('check/token').then((Response)=>{
+                if(Response.code==0){
+                    this.$notify({
+                        message:'登录成功',
+                        background:'green',
+                        duration: 1000
+                    })
+                    this.$router.push('/MessageCenter')
+                    setToken(Response.data)
+                }
             })
-            localStorage.setItem('admin_token','2dsfewr')
-            this.$router.push('/MessageCenter')
-            location.reload();
+            
+            // localStorage.setItem('admin_token','2dsfewr')
+            // this.$router.push('/MessageCenter')
+            // location.reload();
         }else{
             this.$notify({
                 message:'账号或密码不正确',

src/views/My.vue

@@ -62,6 +62,7 @@
 
 <script>
 import tabBar from "@/components/TabBar";
+import { removeToken } from '@/utils/auth' // get token from cookie
 export default {
   components: {
     tabBar
@@ -83,9 +84,10 @@ export default {
   mounted() {},
   methods: {
     logout() {
-        localStorage.removeItem('admin_token');
+        // localStorage.removeItem('admin_token');
         this.$router.push("/Login2");
-        location.reload();
+        removeToken()
+        // location.reload();
     }
   }
 };