vue路由守卫+登录态管理
2018-10-30 16:45
489 查看
在路由文件需要守卫的path后面加上meta
{path: '/home',component: home,meta:{requireAuth:true}}
在main.js里面加上
//路由守卫 router.beforeEach((to, from, next) => { console.log(to); console.log(from); if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if(JSON.parse(localStorage.getItem('islogin'))){ //判断本地是否存在access_token next(); }else { next({ path:'/login' }) } } else { next(); } /*如果本地 存在 token 则 不允许直接跳转到 登录页面*/ if(to.fullPath == "/login"){ if(JSON.parse(localStorage.getItem('islogin'))){ next({ path:from.fullPath }); }else { next(); } } });
其中islogin是登录态,就是true or false,true表示登录,false表示未登录,存放在localStorage里面,因为localStorage里面只能存字符串,所以存进去的时候需要localStorage.setItem(‘islogin’,JSON.stringify(islogin));将islogin变为String类型,取出来的时候需要将islogin转化为Boolean类型,就比如JSON.parse(localStorage.getItem(‘islogin’))这样。
那么还有一个问题,就是islogin登录态的管理,vue不能实时监测localStorage的变化,需要实时监测islogin的变化来在页面显示登录还是已经登录,我用的是vuex+localStorage来管理islogin。展示部分代码
//store.js中 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state:{ //是否登录判断 islogin:'' }, mutations:{ login:(state,n) => { //传入登录状态islogin let islogin = JSON.parse(n); localStorage.setItem('islogin',JSON.stringify(islogin)); console.log(islogin); state.islogin = islogin; } } }
在需要改变登录态的页面只要触发上面这个login方法就可以了
//这里是登录 login() { let flag = true; this.$store.commit('login',flag); this.$router.push("/home"); console.log("登录成功"); } //这里是退出登录 exit() { let flag = false; this.$store.commit('login',flag); this.$router.push("/login"); console.log("退出登录"); }
登录注册部分样式参考的element-ui
http://note.youdao.com/noteshare?id=f670900256dc51a19c36f31a5933febf
相关文章推荐
- 用 vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)
- 使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
- vue 利用路由守卫判断是否登录的方法
- vue之登录路由验证
- Vue + ElementUI 手撸后台管理网站基本框架(三)登录及系统菜单加载
- vue+axios 前端实现登录拦截(路由拦截、http拦截)
- vue路由跳转时判断用户是否登录功能的实现
- Vue的路由动态重定向和导航守卫实例
- vue后台管理之动态加载路由的方法
- vue实现登录路由拦截
- vue-resource请求实现http登录拦截或者路由拦截的方法
- vue-resource请求,实现http登录拦截或者路由拦截
- vue+axios 前端实现登录拦截(路由拦截、http拦截)
- vue-router 实现导航守卫(路由卫士)的实例代码
- (转)Vue2.X的路由管理记录之 钩子函数(切割流水线)
- vue移动端iso 利用钩子里面的导航守卫beforeRouteLeave实现返回按钮不返回上一次路由,返回到自己指定的路由
- 详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
- vue登录路由验证的实现
- 使用vue-router beforEach实现判断用户登录跳转路由筛选功能