vue-判断登陆状态

佚名 6年前 (2019-05-08) 随笔 920人围观抢沙发百度已收录

1.引入vuex 在其中存储用户状态

import Vue from ‘vue‘ import Vuex from ‘vuex‘ Vue.use(Vuex); var state = { isLogin:0,     //初始时候给一个 isLogin=0 表示用户未登录
}; const mutations = { changeLogin(state,data){ state.isLogin = data; } };

2.在用户登录时改变登录状态

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

//登录页面。

this.$store.commit(‘changeLogin‘,‘1‘) //登录后改变登录状态 isLogin = 1 ；

3.路由入口加上导航钩子

//需要验证登陆的页面加上meta校验
 { path: ‘/admin‘, 
 component: Admin, meta:{auth:true} // 不需要校验的路由就不用写了
 }

4.路由跳转并校验

router.beforeEach((to,from,next) => { 　　if(to.matched.some( m => m.meta.auth)){ 　　　　// 对路由进行验证 
　　　　if(store.state.isLogin=='1') { // 已经登陆 
　　　　　　next()   // 正常跳转到你设置好的页面 
　　　　} 　　　　else{ 　　　　　　// 未登录则跳转到登陆界面，query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来； 　　　　　　next({path:‘/login‘,query:{ Rurl: to.fullPath} })
　　　　} 　　}else{ 　　　　　　next() 　　} })

5.无论进入那个页面都要登陆的话可以使用接口完成（跳过以上步骤）

route.beforeEach((to, from, next) => { //to:前往路径
    //from:前路径 
    getJSON("Manage/FlowManage/NoHandNotice/IsLogin",{},function(res){ if(res.data.message=='1'){ //登陆状态
            if(to.name=="login"){ //如果是登录页
                route.push({name: 'Index',path:'Home/Index'});//跳转首页
 } }else{ //未登录状态
            route.push({name: 'login',path:'/'});//跳转登录页
 } },function(err){ console.log(err) }) next(); })