前言

前端用什么框架都可以，这里选择小巧的vuejs。

要实现的功能很简单：

1、登录功能，成功将服务器返回的代币存在本地

2、使用带代币的页眉访问服务器的一个资源

本次实验环境：

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','文件-loader ' 3: '^0.9.0',' vue-loader ' : '^11.1.4',' vue-template-compiler ' 333:开发集成开发环境：原子

首先建一个项目

使用webpack构建

/Atom # vue init web包-简单vue-jwt-演示./Atom # CD vue-jwt-demo//Atom/vue-jwt-demo # cnpm安装/Atom/vue-jwt-demo# npm运行偏差安装插件

/Atom/vue-jwt-demo# cnpm安装vue-路由器/Atom/vue-jwt-demo# cnpm安装vue-资源整体目录

auth.js

完成代币的存取

const SERVER _ URL=' http://localhost :8081 ' const LOGING _ URL=SERVER _ URL '/LOGING 2 '导出默认{数据： {已验证：为假}，登录名（上下文，信息){上下文.$ http。帖子(登录网址，信息).然后(功能(数据){控制台。日志(数据。bodytext)本地存储。setitem(' token '，数据。body text)；this.authenticated=true //跳到家页这个$router.push('home') }，function(err){ console.log(err '，' err。尸体。消息)上下文。错误=错误。尸体。message })}，getAuthHeader(){返回{ ' Authorization ' : ' border '本地存储。getitem(' token ')} }，checkAuth(){ var token=本地存储。getitem(' token ')if(token){ this。authenticated=true } else { this。authenticated=false } } main。js .

程序入口：完成路由和初始化

从“vue”导入某视频剪辑软件从“应用程序”导入/App.vue "从导入登录"。/组件/登录从导入主页"。/组件/Home.vue '从“vue路由器”导入VueResource从' vue-resource '导入授权于./auth/auth ' vue。使用(vue路由器)vue。使用(VueResource)//在启动应用时进行校验是否有令牌验证。check auth()const routes=[{ path : '/'，redirect : '/' log in ' }，{ path:'/login '，component:Home '，component : home }]const router=new VueRouter({ routes })new Vue({ router，render: h=h(App)}).$mount('#app')App.vue

页面载体

模板div id='app' h1{{msg}}/h1路由器-视图/路由器-视图/div/templatescript导出默认值{ name : ' app '，data () { return { msg: 'Vue前后端分离demo' } }}/scriptLogin.vue

登录页面

模板div h2登录/h2 p{{错误}}/p div输入类型=“文本”占位符='输入您的用户名v-model='info.username' /div div输入类型='密码'占位符='输入您的密码v-model='info.password' /div按钮@单击='submit()'登录/button/div/templatescript从导入身份验证./auth/auth ' export default { data(){ return { info : { username : ' '，password: '' }，error: '' }，方法： { submit(){ var info={ username : this。信息。用户名，密码：这个。信息。密码}身份验证。登录(此，信息)}/脚本效果：丑是丑了点

Home.vue

主页面，访问一个获取邮箱的请求

模板div id=' home ' h1 { { msg } }/h1 button @ click=' getEmail()' Get Email/button H2 Email : { { Email } }/H2/div/templatescriptimport auth from './auth/auth '导出默认{ name : ' home '，data () { return { msg: '欢迎您登录成功，email:'' } }，beforeCreate(){ //如果没有代币的话需要重新登录if(！auth.authenticated){这个.$router.push('login') } }，methods:{ getEmail(){ this .$ http。get(' http://localhost :8081/user/GetEmail '，{ header s : auth。GetAuthHeader()}).然后(函数(re){ this。email=re。正文}、函数(){控制台。log(' get email error ')} } } } }/script style # app { font-family : ' Avenir '，Helvetica，Arial，sans-serif；-网络套件-字体-流畅：抗锯齿；-moz-OSX-字体-平滑：灰度；文本对齐：中心；颜色： # 2c 3e 50边距-top : 60px；}h1、H2 {字体粗细：正常；} a { color: # 42b983}/样式对应在服务端：

@GetMapping('/getEmail ')公共字符串getEmail(){ return“[email protected]”；}

可看到浏览器的本地存储：

代码：https://github。com/jimolonelly/vue-jwt-demo

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。