VueJS frontend and backend separation-VueJS

VueJS frontend and backend separation-VueJS

This section is followed by the previous blog: Java backend for frontend and backend Separation

Code: https://github.com/jimolonely/vue-jwt-demo

Preface

The front-end can use any framework. Here we select the small vuejs.

The functions to be implemented are simple:
1. the logon function successfully saves the token returned by the server to a local device.
2. Use a header with a token to access a server resource

This lab environment:

"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"  }

Development IDE: Atom

First, create a project

Build with 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 dev

Install plug-ins

/Atom/vue-jwt-demo# cnpm install vue-router/Atom/vue-jwt-demo# cnpm install vue-resource

Overall directory

Auth. js

Complete token Access

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 // jump to the home page 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 }}}

Main. js

Program entry: Route completion and initialization

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 'vue. use (VueRouter) Vue. use (VueResource) // check whether tokenauth exists when the APP is started. 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 ')

App. vue

Page Carrier

<Template> <div id = "app"> 

Login. vue

Logon page

<Template> <div> 

Effect: ugly

Home. vue

On the home page, access a request to get an email address.

<Template> <div id = "home"> 

Corresponding to the server:

@GetMapping("/getEmail")    public String getEmail() {        return "xxxx@qq.com";    }

You can see the local storage of the browser:

Refer:
Https://github.com/auth0-blog/vue-jwt-authentication (vue1.x based)
Https://router.vuejs.org/zh-cn/essentials/getting-started.html