前言
前端用什么框架都可以，这里选择小巧的vuejs。
要实现的功能很简单：
2、使用带token的header访问服务器的一个资源
本次实验环境：
开发IDE：Atom
首先建一个项目
使用webpack构建
安装插件
/Atom/vue-jwt-demo# cnpm install vue-resource
整体目录
auth.js
完成token的存取
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
}
}
}
main.js
程序入口：完成路由和初始化
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')
App.vue
页面载体
Login.vue
效果：丑是丑了点
Home.vue
对应在服务端：
可看到浏览器的本地存储：
代码：https://github.com/jimolonely/vue-jwt-demo
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文地址：https://www.jb51.cc/vue/39056.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
