├── .gitignore
├── README.md
├── jwt-pure-js
    ├── README.md
    ├── js
    │   ├── lib
    │   │   ├── jquery-1.12.4.js
    │   │   └── vue.js
    │   └── util
    │   │   └── util.js
    └── views
    │   ├── index.html
    │   └── login.html
└── vue-jwt-demo
    ├── README.md
    ├── index.html
    ├── npm-debug.log
    ├── package-lock.json
    ├── package.json
    ├── src
        ├── App.vue
        ├── assets
        │   └── logo.png
        ├── auth
        │   └── auth.js
        ├── component
        │   ├── Home.vue
        │   └── Login.vue
        ├── main.js
        └── util
        │   └── net.js
    └── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | vue-jwt-demo/node_modules
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # 说明
 3 | 
 4 | 本项目有2个关于前后端分离的前端实现
 5 | 
 6 | 1. vue-jwt-demo: 使用vue js构建
 7 | 2. jwt-pure-js: 使用传统js构建
 8 | 
 9 | **2018-08修改：**
10 | 
11 | 将token放在header里改为放在参数里传递
12 | 


--------------------------------------------------------------------------------
/jwt-pure-js/README.md:
--------------------------------------------------------------------------------
1 | # 介绍
2 | 纯的js+jquery+vue.js
3 | 


--------------------------------------------------------------------------------
/jwt-pure-js/js/util/util.js:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * 网络请求封装模块
 4 |  */
 5 | var net = {
 6 |     HOST: "http://localhost:8081",
 7 |     /**
 8 |      * JSON请求，后台使用RequestBody接收数据
 9 |      */
10 |     postJson: function (url, data, callback) {
11 |         $.ajax({
12 |             url: net.HOST + url,
13 |             type: "POST",
14 |             dataType: "json",
15 |             contentType: "application/json;charset=utf-8",
16 |             data: JSON.stringify(data),
17 |             success: function (re) {
18 |                 if (re.ok) {
19 |                     callback(re);
20 |                 } else {
21 |                     console.log(re.msg);
22 |                 }
23 |             },
24 |             error: function (e) {
25 |                 console.log(e)
26 |                 alert("error")
27 |             }
28 |         })
29 |     }
30 | }
31 | 
32 | /**
33 |  * 本地存储模块
34 |  */
35 | var storage = {
36 |     TOKEN_KEY: "token_key",
37 |     /**
38 |      * 存储token到cookie
39 |      */
40 |     tokenStore: function (token) {
41 |         console.log(document.cookie)
42 |         // cookie.setCookie(storage.TOKEN_KEY, token, 1);
43 |         sessionStorage.TOKEN_KEY = token;
44 |     },
45 |     /**
46 |      * 获取token
47 |      */
48 |     tokenGet: function () {
49 |         // var token = cookie.getCookie(storage.TOKEN_KEY);
50 |         // return token;
51 |         return sessionStorage.TOKEN_KEY;
52 |     },
53 |     isTokenValid: function () {
54 |         if (storage.tokenGet() === null) {
55 |             return false;
56 |         }
57 |         return true;
58 |     }
59 | }
60 | 
61 | /**
62 |  * js操作cookie工具类
63 |  */
64 | var cookie = {
65 |     //写cookies
66 |     setCookie: function (cname, cvalue, exdays) {
67 |         var d = new Date();
68 |         d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
69 |         var expires = "expires=" + d.toGMTString();
70 |         document.cookie = cname + "=" + cvalue + "; " + expires;
71 |     },
72 |     //读取cookies 
73 |     getCookie: function (cname) {
74 |         var name = cname + "=";
75 |         var ca = document.cookie.split(';');
76 |         for (var i = 0; i < ca.length; i++) {
77 |             var c = ca[i].trim();
78 |             if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); }
79 |         }
80 |         return "";
81 |     },
82 |     //删除cookies 
83 |     delCookie: function (name) {
84 |         var exp = new Date();
85 |         exp.setTime(exp.getTime() - 1);
86 |         var cval = cookie.getCookie(name);
87 |         if (cval != null) {
88 |             document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
89 |         }
90 |     }
91 | }


--------------------------------------------------------------------------------
/jwt-pure-js/views/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | 
  4 | <head>
  5 |     <meta charset="utf-8">
  6 |     <title>Vue.js learn</title>
  7 | </head>
  8 | 
  9 | <body>
 10 | 
 11 |     <div id="test">
 12 |         {{email}}
 13 |         <button @click="click()">click me</button>
 14 |     </div>
 15 |     <div id="app">
 16 |         {{message}}
 17 |     </div>
 18 | 
 19 |     <div id="app2">
 20 |         <span v-bind:title="message">move on</span>
 21 |     </div>
 22 | 
 23 |     <div id="app3">
 24 |         <p v-if="seen">你看见我了</p>
 25 |     </div>
 26 |     <div id="app4">
 27 |         <ol>
 28 |             <li v-for="todo in todos">{{todo.text}}</li>
 29 |         </ol>
 30 |     </div>
 31 |     <div id="app5">
 32 |         <p>{{message}}</p>
 33 |         <button v-on:click="reverse">click</button>
 34 |     </div>
 35 |     <div id="app6">
 36 |         <p>{{msg}}</p>
 37 |         <input v-model="msg" />
 38 |     </div>
 39 |     <div id="app7">
 40 |         <ol>
 41 |             <todo-item v-for="todo in todos" v-bind:todo="todo" v-bind:key="todo.id">
 42 |             </todo-item>
 43 |         </ol>
 44 |     </div>
 45 | 
 46 |     <script src="../js/lib/vue.js"></script>
 47 |     <script src="../js/lib/jquery-1.12.4.js"></script>
 48 |     <script src="../js/util/util.js"></script>
 49 | 
 50 |     <script type="text/javascript">
 51 | 
 52 |         var test = new Vue({
 53 |             el: '#test',
 54 |             data: {
 55 |                 email: ''
 56 |             },
 57 |             methods: {
 58 |                 click: function () {
 59 |                     let self = this;
 60 |                     $.ajax({
 61 |                         url: "http://localhost:8081/user/getEmail",
 62 |                         type: 'GET',
 63 |                         // dataType: 'JSON',
 64 |                         // beforeSend: function (xhr) {
 65 |                         //     xhr.setRequestHeader("Authorization", 'Bearer ' + token);
 66 |                         // },
 67 |                         contentType: "application/json;charset=UTF-8",
 68 |                         data: {
 69 |                             "Authorization": "Bearer " + storage.tokenGet()
 70 |                         },
 71 |                         success: function (re) {
 72 |                             if (re.ok) {
 73 |                                 self.email = re.data;
 74 |                             } else {
 75 |                                 alert(re.msg);
 76 |                             }
 77 |                         },
 78 |                         error: function (e) {
 79 |                             console.log(e)
 80 |                         }
 81 |                     })
 82 |                 }
 83 |             }
 84 |         })
 85 | 
 86 |         Vue.component('todo-item', {
 87 |             props: ['todo'],
 88 |             template: '<li>{{todo.text}}</li>'
 89 |         })
 90 | 
 91 |         var app7 = new Vue({
 92 |             el: '#app7',
 93 |             data: {
 94 |                 todos: [
 95 |                     { id: 1, text: "asdasd" },
 96 |                     { id: 2, text: "asdasd" },
 97 |                     { id: 3, text: "asdasd" },
 98 |                 ]
 99 |             }
100 |         })
101 | 
102 |         var app6 = new Vue({
103 |             el: '#app6',
104 |             data: {
105 |                 msg: "heloo asdas"
106 |             }
107 |         })
108 |         var app5 = new Vue({
109 |             el: '#app5',
110 |             data: {
111 |                 message: "hello jimo"
112 |             },
113 |             methods: {
114 |                 reverse: function () {
115 |                     this.message = this.message.split("").reverse().join("")
116 |                 }
117 |             }
118 |         })
119 |         var app4 = new Vue({
120 |             el: '#app4',
121 |             data: {
122 |                 todos: [
123 |                     { text: "jsdks" },
124 |                     { text: "jsasdasd" },
125 |                     { text: "123334" }
126 |                 ]
127 |             }
128 |         })
129 |         var app3 = new Vue({
130 |             el: '#app3',
131 |             data: {
132 |                 seen: true
133 |             }
134 |         })
135 |         var app = new Vue({
136 |             el: '#app',
137 |             data: {
138 |                 message: "hello"
139 |             }
140 |         })
141 | 
142 |         var app2 = new Vue({
143 |             el: "#app2",
144 |             data: {
145 |                 message: 'time is:' + new Date().toLocaleTimeString()
146 |             }
147 |         })
148 |     </script>
149 | </body>
150 | 
151 | </html>


--------------------------------------------------------------------------------
/jwt-pure-js/views/login.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <title>Login</title>
 7 | </head>
 8 | 
 9 | <body>
10 |     <h1>前后端分离登录</h1>
11 |     <div id="login">
12 |         Name:
13 |         <input type="text" required v-model="name" /> Password:
14 |         <input type="text" required v-model="pass" />
15 |         <button id="btn_submit" v-on:click="submit">Submit</button>
16 |         <p>{{error}}</p>
17 |     </div>
18 | 
19 | 
20 |     <script src="../js/lib/vue.js"></script>
21 |     <script src="../js/lib/jquery-1.12.4.js"></script>
22 |     <script src="../js/util/util.js"></script>
23 | 
24 |     <script type="text/javascript">
25 |         var login = new Vue({
26 |             el: '#login',
27 |             data: {
28 |                 name: "",
29 |                 pass: "",
30 |                 error: ""
31 |             },
32 |             methods: {
33 |                 submit: function () {
34 |                     if (this.name === "" || this.pass === "") {
35 |                         this.error = "not blank";
36 |                     } else {
37 |                         console.log(this.name)
38 |                         net.postJson("/user/login", {
39 |                             username: this.name,
40 |                             password: this.pass
41 |                         }, function (re) {
42 |                             console.log(re)
43 |                             storage.tokenStore(re.data);
44 |                             window.location.href = "./index.html";
45 |                         });
46 |                     }
47 |                 }
48 |             }
49 |         });
50 |     </script>
51 | </body>
52 | 
53 | </html>


--------------------------------------------------------------------------------
/vue-jwt-demo/README.md:
--------------------------------------------------------------------------------
 1 | # vue-jwt-demo
 2 | 
 3 | > 一个最简单的vue.js项目，实现了前后端分离的基本功能
 4 | > 对应的java后台：https://github.com/jimolonely/AuthServer
 5 | 
 6 | ## Build Setup
 7 | 
 8 | ``` bash
 9 | # install dependencies
10 | npm install
11 | 
12 | # serve with hot reload at localhost:8080
13 | npm run dev
14 | 
15 | # build for production with minification
16 | npm run build
17 | ```
18 | 
19 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
20 | 


--------------------------------------------------------------------------------
/vue-jwt-demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>vue-jwt-demo</title>
 6 |   </head>
 7 |   <body>
 8 |     <div id="app"></div>
 9 |     <script src="/dist/build.js"></script>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/vue-jwt-demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-jwt-demo",
 3 |   "description": "A Vue.js project",
 4 |   "version": "1.0.0",
 5 |   "author": "jimolonely",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
 9 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
10 |   },
11 |   "dependencies": {
12 |     "jquery": "^3.2.1",
13 |     "vue": "^2.5.17",
14 |     "vue-resource": "^1.5.1",
15 |     "vue-router": "^3.0.1"
16 |   },
17 |   "devDependencies": {
18 |     "babel-core": "^6.0.0",
19 |     "babel-loader": "^6.0.0",
20 |     "babel-preset-latest": "^6.0.0",
21 |     "cross-env": "^3.0.0",
22 |     "css-loader": "^0.25.0",
23 |     "file-loader": "^0.9.0",
24 |     "vue-loader": "^11.1.4",
25 |     "vue-template-compiler": "^2.2.1",
26 |     "webpack": "^2.2.0",
27 |     "webpack-dev-server": "^2.2.0"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/vue-jwt-demo/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <h1>{{msg}}</h1>
 4 |     <router-view></router-view>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'app',
11 |   data () {
12 |     return {
13 |       msg: 'Vue前后端分离demo'
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | #app {
21 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
22 |   -webkit-font-smoothing: antialiased;
23 |   -moz-osx-font-smoothing: grayscale;
24 |   text-align: center;
25 |   color: #2c3e50;
26 |   margin-top: 60px;
27 | }
28 | 
29 | h1, h2 {
30 |   font-weight: normal;
31 | }
32 | 
33 | ul {
34 |   list-style-type: none;
35 |   padding: 0;
36 | }
37 | 
38 | li {
39 |   display: inline-block;
40 |   margin: 0 10px;
41 | }
42 | 
43 | a {
44 |   color: #42b983;
45 | }
46 | </style>
47 | 


--------------------------------------------------------------------------------
/vue-jwt-demo/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jimolonely/vue-jwt-demo/1b028cb051302ac07c2d18d9e5ce7a3692a3799b/vue-jwt-demo/src/assets/logo.png


--------------------------------------------------------------------------------
/vue-jwt-demo/src/auth/auth.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const SERVER_URL = 'http://localhost:8081'
 3 | const LOGIN_URL = SERVER_URL + '/user/login'
 4 | 
 5 | import net from '../util/net';
 6 | 
 7 | export default {
 8 |     data: {
 9 |         authenticated: false
10 |     },
11 |     // login(context, info) {
12 |     //     net.postJson('/user/login', info, function (token) {
13 |     //         localStorage.setItem('token', token);
14 |     //         this.$router.push('home');
15 |     //     })
16 |         // context.$http.post(LOGIN_URL, info).then(function (data) {
17 |         //     console.log(data)
18 |         //     var re = data.body;
19 |         //     console.log(re.ok);
20 |         //     if (re.ok) {
21 |         //         localStorage.setItem('token', re.data);
22 |         //         this.authenticated = true
23 |         //         this.$router.push('home')
24 |         //     } else {
25 |         //         console.log(re)
26 |         //     }
27 |         // }, function (err) {
28 |         //     console.log(err + "," + err.body.message)
29 |         //     context.error = err.body.message
30 |         // })
31 |     // },
32 |     getAuthHeader() {
33 |         return {
34 |             'Authorization': 'Bearer ' + localStorage.getItem('token')
35 |         }
36 |     },
37 |     checkAuth(context) {
38 |         var token = localStorage.getItem('token')
39 |         if (token) {
40 |             this.authenticated = true
41 |         } else {
42 |             this.authenticated = false
43 |         }
44 |     }
45 | }
46 | 


--------------------------------------------------------------------------------
/vue-jwt-demo/src/component/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="home">
 3 |     <h1>{{msg}}</h1>
 4 |     <button @click="getEmail()">Get Email</button>
 5 |     <h2>Email:{{email}}</h2>
 6 |     <p></p>
 7 |     <button @click="checkToken()">Check Token</button>
 8 |     <h2>Token:{{token}}</h2>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import auth from "../auth/auth";
14 | import net from "../util/net";
15 | 
16 | export default {
17 |   name: "home",
18 |   data() {
19 |     return {
20 |       msg: "欢迎您登录成功",
21 |       email: "",
22 |       token: ""
23 |     };
24 |   },
25 |   beforeCreate() {
26 |     // //如果没有token的话需要重新登录
27 |     //  if(!auth.authenticated){
28 |     //     this.$router.push('login')
29 |     // }
30 |   },
31 |   methods: {
32 |     getEmail() {
33 |       // this.$http
34 |       //   .get("http://localhost:8081/user/getEmail", {
35 |       //     headers: auth.getAuthHeader()
36 |       //   })
37 |       //   .then(
38 |       //     function(re) {
39 |       //       this.email = re.bodyText;
40 |       //     },
41 |       //     function(e) {
42 |       //       console.log(e);
43 |       //       console.log("get email error");
44 |       //     }
45 |       //   );
46 |       let self = this;
47 |       net.get(
48 |         "user/getEmail",
49 |         function(data) {
50 |           self.email = data;
51 |         },
52 |         this
53 |       );
54 |     },
55 |     checkToken() {
56 |       let self = this;
57 |       net.post(
58 |         "user/checkToken",
59 |         {
60 |           token: localStorage.getItem("token")
61 |         },
62 |         function(data) {
63 |           self.token = data;
64 |         },
65 |         this
66 |       );
67 |     }
68 |   }
69 | };
70 | </script>
71 | 
72 | <style>
73 | #app {
74 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
75 |   -webkit-font-smoothing: antialiased;
76 |   -moz-osx-font-smoothing: grayscale;
77 |   text-align: center;
78 |   color: #2c3e50;
79 |   margin-top: 60px;
80 | }
81 | 
82 | h1,
83 | h2 {
84 |   font-weight: normal;
85 | }
86 | 
87 | a {
88 |   color: #42b983;
89 | }
90 | </style>
91 | 


--------------------------------------------------------------------------------
/vue-jwt-demo/src/component/Login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>登录</h2>
 4 |     <p>{{ error }}</p>
 5 |     <div>
 6 |       <input
 7 |         type="text"
 8 |         placeholder="Enter your username"
 9 |         v-model="info.username"
10 |       >
11 |     </div>
12 |     <div>
13 |       <input
14 |         type="password"
15 |         placeholder="Enter your password"
16 |         v-model="info.password"
17 |       >
18 |     </div>
19 |     <button @click="submit()">登录</button>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | import net from "../util/net";
25 | 
26 | export default {
27 |   data() {
28 |     return {
29 |       info: {
30 |         username: "",
31 |         password: ""
32 |       },
33 |       error: ""
34 |     };
35 |   },
36 |   methods: {
37 |     submit() {
38 |       var info = {
39 |         username: this.info.username,
40 |         password: this.info.password
41 |       };
42 | 
43 |       let context = this;
44 |       net.postJson("user/login", info, function(token) {
45 |         localStorage.setItem("token", token);
46 |         context.$router.push("home");
47 |       });
48 |     }
49 |   }
50 | };
51 | </script>
52 | 


--------------------------------------------------------------------------------
/vue-jwt-demo/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import Login from './component/Login.vue'
 4 | import Home from './component/Home.vue'
 5 | import VueRouter from 'vue-router'
 6 | import VueResource from 'vue-resource'
 7 | import auth from './auth/auth'
 8 | 
 9 | Vue.use(VueRouter)
10 | Vue.use(VueResource)
11 | 
12 | //在启动APP时进行校验是否有token
13 | auth.checkAuth()
14 | 
15 | const routes= [
16 |     {
17 |         path:'/',redirect:'/login'
18 |     },
19 |     {
20 |         path:'/login',component:Login
21 |     },
22 |     {
23 |         path:'/home',component:Home
24 |     }
25 | ]
26 | 
27 | const router = new VueRouter({
28 |     routes
29 | })
30 | new Vue({
31 |   router,
32 |   render: h => h(App)
33 | }).$mount('#app')
34 | 


--------------------------------------------------------------------------------
/vue-jwt-demo/src/util/net.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 本工具类与网络相关
  3 |  */
  4 | import $ from 'jquery';
  5 | 
  6 | const SERVER_URL = 'http://localhost:8081/'
  7 | 
  8 | export default {
  9 |     /**
 10 |      * 检查token是否合法，需要服务器认证
 11 |      */
 12 |     isTokenValid() {
 13 |         var token = localStorage.getItem('token');
 14 |         if (token) {
 15 |             this.get("user/checkToken?token=" + token, function () {
 16 |                 return true;
 17 |             })
 18 |         } else {
 19 |             console.log("token不存在")
 20 |             this.$router.push('login');
 21 |         }
 22 |     },
 23 |     /**
 24 |      * token放在header里后台接受不到，放在参数里一起传递
 25 |      */
 26 |     postJson(url, json, callback) {
 27 |         var token = localStorage.getItem('token');
 28 |         if (token || url === "user/login") {
 29 |             json.Authorization = 'Bearer ' + token;
 30 |             console.log(json)
 31 |             $.ajax({
 32 |                 url: SERVER_URL + url,
 33 |                 type: 'POST',
 34 |                 dataType: 'json',
 35 |                 contentType: 'application/json;charset=utf-8',
 36 |                 data: JSON.stringify(json),
 37 |                 success: function (re) {
 38 |                     console.log(re)
 39 |                     if (re.ok) {
 40 |                         callback(re.data);
 41 |                     } else {
 42 |                         alert(re.msg);
 43 |                     }
 44 |                 },
 45 |                 error: function (e) {
 46 |                     console.log(e)
 47 |                 }
 48 |             })
 49 |         } else {
 50 |             console.log("token不存在")
 51 |             this.$router.push('login');
 52 |         }
 53 |     },
 54 |     get(url, callback, context) {
 55 |         var token = localStorage.getItem('token');
 56 |         if (token) {
 57 |             $.ajax({
 58 |                 url: SERVER_URL + url,
 59 |                 type: "GET",
 60 |                 beforeSend: function (xhr) {
 61 |                     xhr.setRequestHeader("Authorization", 'Bearer ' + token);
 62 |                 },
 63 |                 data: {
 64 |                     Authorization: 'Bearer ' + token
 65 |                 }
 66 |             }).then(function (re, status, jqxhr) {
 67 |                 console.log(jqxhr);
 68 |                 console.log(status);
 69 |                 console.log(re)
 70 |                 if (re.ok) {
 71 |                     callback(re.data);
 72 |                 } else {
 73 |                     alert(re.msg);
 74 |                 }
 75 |             });
 76 | 
 77 |             // $.ajax({
 78 |             //     url: SERVER_URL + url,
 79 |             //     type: 'GET',
 80 |             //     dataType: 'JSON',
 81 |             //     // beforeSend: function (xhr) {
 82 |             //     //     xhr.setRequestHeader("Authorization", 'Bearer ' + token);
 83 |             //     // },
 84 |             //     headers: {
 85 |             //         "Authorization": "Bearer " + token
 86 |             //     },
 87 |             //     success: function (re) {
 88 |             //         if (re.ok) {
 89 |             //             callback(re.data);
 90 |             //         } else {
 91 |             //             alert(re.msg);
 92 |             //         }
 93 |             //     },
 94 |             //     error: function (e) {
 95 |             //         console.log(e)
 96 |             //     }
 97 |             // })
 98 |         } else {
 99 |             console.log("token不存在")
100 |             context.$router.push('login');
101 |         }
102 |     },
103 |     post(url, json, callback, context) {
104 |         var token = localStorage.getItem('token');
105 |         if (token) {
106 |             json.Authorization = 'Bearer ' + token;
107 |             $.ajax({
108 |                 url: SERVER_URL + url,
109 |                 type: 'POST',
110 |                 data: json,
111 |                 success: function (re) {
112 |                     console.log(re)
113 |                     if (re.ok) {
114 |                         callback(re.data);
115 |                     } else {
116 |                         alert(re.msg);
117 |                     }
118 |                 },
119 |                 error: function (e) {
120 |                     console.log(e)
121 |                 }
122 |             })
123 |         } else {
124 |             console.log("token不存在")
125 |             context.$router.push('login');
126 |         }
127 |     }
128 | }


--------------------------------------------------------------------------------
/vue-jwt-demo/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | module.exports = {
 4 |   entry: './src/main.js',
 5 |   output: {
 6 |     path: path.resolve(__dirname, './dist'),
 7 |     publicPath: '/dist/',
 8 |     filename: 'build.js'
 9 |   },
10 |   module: {
11 |     rules: [
12 |       {
13 |         test: /\.vue$/,
14 |         loader: 'vue-loader',
15 |         options: {
16 |           loaders: {
17 |           }
18 |           // other vue-loader options go here
19 |         }
20 |       },
21 |       {
22 |         test: /\.js$/,
23 |         loader: 'babel-loader',
24 |         exclude: /node_modules/
25 |       },
26 |       {
27 |         test: /\.(png|jpg|gif|svg)$/,
28 |         loader: 'file-loader',
29 |         options: {
30 |           name: '[name].[ext]?[hash]'
31 |         }
32 |       }
33 |     ]
34 |   },
35 |   resolve: {
36 |     alias: {
37 |       'vue$': 'vue/dist/vue.esm.js'
38 |     }
39 |   },
40 |   devServer: {
41 |     historyApiFallback: true,
42 |     noInfo: true
43 |   },
44 |   performance: {
45 |     hints: false
46 |   },
47 |   devtool: '#eval-source-map'
48 | }
49 | 
50 | if (process.env.NODE_ENV === 'production') {
51 |   module.exports.devtool = '#source-map'
52 |   // http://vue-loader.vuejs.org/en/workflow/production.html
53 |   module.exports.plugins = (module.exports.plugins || []).concat([
54 |     new webpack.DefinePlugin({
55 |       'process.env': {
56 |         NODE_ENV: '"production"'
57 |       }
58 |     }),
59 |     new webpack.optimize.UglifyJsPlugin({
60 |       sourceMap: true,
61 |       compress: {
62 |         warnings: false
63 |       }
64 |     }),
65 |     new webpack.LoaderOptionsPlugin({
66 |       minimize: true
67 |     })
68 |   ])
69 | }
70 | 


--------------------------------------------------------------------------------