vue登录注册及token验证实现代码
2017-12-14 10:50
1826 查看
在大多数网站中,实现登录注册都是结合本地存储cookie、localStorage和请求时验证token等技术。而对于某些功能页面,会尝试获取本地存储中的token进行判断,存在则可进入,否则跳到登录页或弹出登录框。
而在vue单页中,我们可以通过监控route对象,从中匹配信息去决定是否验证token,然后定义后续行为。
具体实现代码如下:
1. 利用router.beforeEach钩子, 判断目标路由是否携带了相关meta信息
// router.js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', component: require('./views/Home'), meta: { requiresAuth: true } }, ] const router = new VueRouter({ routes: routes }) router.beforeEach((to, from, next) => { let token = window.localStorage.getItem('token') if (to.matched.some(record => record.meta.requiresAuth) && (!token || token === null)) { next({ path: '/login', query: { redirect: to.fullPath } }) } else { next() } }) export default router
2. watch route对象。原理同上。
<script> // App.vue export default { watch:{ '$route':function(to,from){ let token = window.localStorage.getItem('token'); if (to.matched.some(record => record.meta.requiresAuth) && (!token || token === null)) { next({ path: '/login', query: { redirect: to.fullPath } }) } else { next() } } } } </script>
总结
以上所述是小编给大家介绍的vue登录注册及token验证实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- php自动注册登录验证机制实现代码
- Vue+Vue Router+Axios+Webpack+Flask+MySQL实现简单的注册、登录验证功能
- 登录注册功能的实现,核心的验证代码
- vue 登录滑动验证实现代码
- Vue+Flask实现简单的登录验证跳转的示例代码
- 用JavaScript实现用户登录验证、注册信息格式检验(附代码)
- Vue实战之vue登录验证的实现代码
- php中实现自动注册自动登录验证代码
- php自动注册登录验证机制实现代码
- vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。
- 基于vue 实现token验证的实例代码
- Django1.6 用Form实现注册登录注销修改密码(含代码!)
- jQuery实现登录注册验证
- Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
- 用 vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)
- Java注册邮箱激活验证实现代码
- Ionic+AngularJS实现登录和注册带验证功能
- Ajax方式实现注册验证代码
- vue-cli,vue-axios登录注册实例 (后台flask实现,数据库sqlite3)并在iphone模拟器中运行
- ssm+bootstrap验证练习01注册验证(方法二)--代码实现