vue-判断登陆状态

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.在用户登录时改变登录状态

//登录页面。

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();
})

 

转载于:https://www.cnblogs.com/MJ-MY/p/10833524.html

  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用 Vue.js 和 TypeScript 的结合,在组件中定义一个 computed 属性,来动态判断用户的登录状态。 具体实现步骤如下: 1. 定义一个 computed 属性,用来判断用户是否已登录: ``` import { defineComponent, computed } from 'vue' import { useStore } from 'vuex' export default defineComponent({ name: 'LoginStatus', setup () { const store = useStore() // 判断用户是否已登录 const isLoggedIn = computed(() => { return store.getters['user/isLoggedIn'] }) return { isLoggedIn } } }) ``` 2. 在组件的模板中使用该 computed 属性,根据用户的登录状态显示不同的内容: ``` <template> <div> <template v-if="isLoggedIn"> <!-- 已登录状态的内容 --> <p>您已登录</p> </template> <template v-else> <!-- 未登录状态的内容 --> <p>请先登录</p> </template> </div> </template> ``` 3. 在 Vuex 中定义一个 getter,用来获取用户的登录状态: ``` import { GetterTree } from 'vuex' import { RootState } from '@/store/types' const getters: GetterTree<RootState, RootState> = { isLoggedIn: state => state.user.isLoggedIn } export default getters ``` 4. 在 store 中定义一个 state,用来保存用户的登录状态: ``` import { Module } from 'vuex' import { RootState } from '@/store/types' interface UserState { isLoggedIn: boolean } const userModule: Module<UserState, RootState> = { namespaced: true, state: { isLoggedIn: false }, mutations: { setIsLoggedIn (state, isLoggedIn: boolean) { state.isLoggedIn = isLoggedIn } }, actions: { login ({ commit }) { // 调用登录接口 // 成功返回 true,失败返回 false const success = true commit('setIsLoggedIn', success) }, logout ({ commit }) { commit('setIsLoggedIn', false) } } } export default userModule ``` 以上就是用 Vue.js 和 TypeScript 判断用户登录状态的方法,您可以根据实际需要进行调整和完善。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值