Detailed description of VueJS frontend for frontend and backend separation and detailed description of vuejs frontend Separation

Detailed description of VueJS frontend for frontend and backend separation and detailed description of vuejs frontend Separation

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:


Code: https://github.com/jimolonely/vue-jwt-demo
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.