前后端分离之VueJS前端
2017-10-20 09:36
776 查看
代码:https://github.com/jimolonely/vue-jwt-demo
前端用什么框架都可以,这里选择小巧的vuejs。
要实现的功能很简单:
1、登录功能,成功将服务器返回的token存在本地
2、使用带token的header访问服务器的一个资源
本次实验环境:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
开发IDE:Atom
使用webpack构建
2
3
4
5
安装插件
2
3
整体目录
完成token的存取
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
程序入口:完成路由和初始化
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
页面载体
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
登录页面
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
效果:丑是丑了点
主页面,访问一个获取邮箱的请求
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
对应在服务端:
2
3
4
可看到浏览器的本地存储:
参考:
https://github.com/auth0-blog/vue-jwt-authentication(基于vue1.x)
https://router.vuejs.org/zh-cn/essentials/getting-started.html
前言
前端用什么框架都可以,这里选择小巧的vuejs。要实现的功能很简单:
1、登录功能,成功将服务器返回的token存在本地
2、使用带token的header访问服务器的一个资源
本次实验环境:
"dependencies": { "vue": "^2.2.1" }, "devDependencies": { "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-preset-latest": "^6.0.0", "cross-env": "^3.0.0", "css-loader": "^0.25.0", "file-loader": "^0.9.0", "vue-loader": "^11.1.4", "vue-template-compiler": "^2.2.1", "webpack": "^2.2.0", "webpack-dev-server": "^2.2.0" }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
开发IDE:Atom
首先建一个项目
使用webpack构建/Atom# vue init webpack-simple vue-jwt-demo ... /Atom# cd vue-jwt-demo/ /Atom/vue-jwt-demo# cnpm install /Atom/vue-jwt-demo# npm run dev1
2
3
4
5
安装插件
/Atom/vue-jwt-demo# cnpm install vue-router /Atom/vue-jwt-demo# cnpm install vue-resource1
2
3
整体目录
auth.js
完成token的存取const SERVER_URL = 'http://localhost:8081' const LOGIN_URL = SERVER_URL+'/login2' export default{ data:{ authenticated:false }, login(context,info){ context.$http.post(LOGIN_URL,info).then(function(data){ console.log(data.bodyText) localStorage.setItem('token',data.bodyText); this.authenticated = true //跳到home页 this.$router.push('home') },function(err){ console.log(err+","+err.body.message) context.error = err.body.message }) }, getAuthHeader(){ return { 'Authorization':'Bearer '+localStorage.getItem('token') } }, checkAuth(){ var token = localStorage.getItem('token') if(token){ this.authenticated = true }else{ this.authenticated = false } } }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
main.js
程序入口:完成路由和初始化import Vue from 'vue' import App from './App.vue' import Login from './component/Login.vue' import Home from './component/Home.vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' import auth from './auth/auth' Vue.use(VueRouter) Vue.use(VueResource) //在启动APP时进行校验是否有token auth.checkAuth() const routes= [ { path:'/',redirect:'/login' }, { path:'/login',component:Login }, { path:'/home',component:Home } ] const router = new VueRouter({ routes }) new Vue({ router, render: h => h(App) }).$mount('#app')1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
App.vue
页面载体<template> <div id="app"> <h1>{{msg}}</h1> <router-view></router-view> </div> </template> <script> export default { name: 'app', data () { return { msg: 'Vue前后端分离demo' } } } </script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Login.vue
登录页面<template> <div> <h2>登录</h2> <p>{{ error }}</p> <div> <input type="text" placeholder="Enter your username" v-model="info.username" > </div> <div> <input type="password" placeholder="Enter your password" v-model="info.password" > </div> <button @click="submit()">登录</button> </div> </template> <script> import auth from '../auth/auth' export default { data() { return { info: { username: '', password: '' }, error: '' } }, methods: { submit() { var info = { username: this.info.username, password: this.info.password } auth.login(this, info) } } } </script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
效果:丑是丑了点
Home.vue
主页面,访问一个获取邮箱的请求<template> <div id="home"> <h1>{{msg}}</h1> <button @click="getEmail()">Get Email</button> <h2>Email:{{email}}</h2> </div> </template> <script> import auth from '../auth/auth' export default { name: 'home', data () { return { msg: '欢迎您登录成功', email:'' } }, beforeCreate(){ //如果没有token的话需要重新登录 if(!auth.authenticated){ this.$router.push('login') } }, methods:{ getEmail(){ this.$http.get('http://localhost:8081/user/getEmail',{ headers:auth.getAuthHeader() }).then(function(re){ this.email = re.bodyText },function(){ console.log("get email error") }) } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } h1, h2 { font-weight: normal; } a { color: #42b983; } </style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
对应在服务端:
@GetMapping("/getEmail") public String getEmail() { return "xxxx@qq.com"; }1
2
3
4
可看到浏览器的本地存储:
参考:
https://github.com/auth0-blog/vue-jwt-authentication(基于vue1.x)
https://router.vuejs.org/zh-cn/essentials/getting-started.html
相关文章推荐
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页(一)
- nginx+vue.js实现前后端分离
- 详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this
- 前后端分离的j2ee的web项目,使用vue方式,即{{}}方式批量传入前端参数,遇到一个一个问题,页面上一开始有{{}},怎么处理?
- nginx+vue.js实现前后端分离的示例代码
- 使用Django + Vue.js快速而优雅地构建前后端分离项目
- SpringBoot+Vue.js实现前后端分离的文件上传功能
- Django+Vue.js搭建前后端分离项目的示例
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二八║ Nuxt 基础:面向源码研究Nuxt.js
- Vue.js (Frontend & Backend)尝试前后端分离
- nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
- 经验分享-前端与后端的接口、HTML分离
- 可能是目前最完整的前端框架 Vue.js 全面介绍
- 为什么43%前端开发者想学Vue.js
- 前后端分离后的前端时代
- 前后端分离 单点登录SSO 纯前端实现单点登录SSO
- Vue.js:轻量高效的前端组件化方案
- 【一】React.JS & BackBone.JS 前后端分离初体验---React组件
- 【前端】Vue.js经典开源项目汇总