vuex+vue-router拦截
2024-09-02 00:37:56
干就完了
项目中经常遇到这样一个场景，用户信息或者进行增删改的一些模块，需要根据用户是否登录，进行路由拦截，直接上代码
在store文件夹下的store.js中存放一个默认登录状态
/*
* store.js
* */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
user: false,
todos: []
}
const mutations = {
//登录
login(state,user){
state.user = user
},
//退出
logout(state,user){
state.user = false
}
}
export default new Vuex.Store({
state,
mutations
})
在main.js中进行配置
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import store from './store/store'
Vue.use(VueRouter)
Vue.config.productionTip = false
const router = new VueRouter({
mode:'history',
routes:[
{
path:'/',
component:(resolve) => {
require(['./components/Home'],resolve)
}
},{
path:'/login',
name:'login',
component:resolve => require(['./components/Login'],resolve)
},{
path:'/contact',
name:'contact',
// 需要登录才能进入的页面可以增加一个meta属性
meta:{
requireAuth: true
},
component:resolve => require(['./components/Contact'],resolve)
},{
path:'*',
component:resolve => require(['./components/Error'],resolve)
}
]
})
router.beforeEach((to, from, next) => {
// 判断是否需要登录权限
if(to.matched.some(res => res.meta.requireAuth)){
if(!store.state.user && to.matched.some(function (item) { return item.path == '/contact' })){
next('/login')
}else{
next()
}
}else{
next()
}
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
在Login组件中进行登录和登出
<template>
<div id="login">
<button @click="loginIn">登录</button>
<button @click="loginOut">登出</button>
</div>
</template>
<script>
import store from '../store/store'
export default({
name:'login',
store,
methods:{
loginIn(){
store.commit('login',true);
},
loginOut(){
store.commit('logout',false);
}
}
})
</script>
ok，完美
最新文章
- 【.NET深呼吸】基于异步上下文的本地变量（AsyncLocal）
- VS2010+VMWare8+VisualDDK1.5.6 创建并调试你的第一个驱动程序 - 完全教程
- （2015年郑州轻工业学院ACM校赛题） G 矩阵
- Excel连接字符串(Oledb)
- LANMP 一键下载
- Django Web开发【3】创建网络收藏夹
- PHP学习笔记5-类的继承/方法重写
- 百度地图JavaScript API使用
- [数据结构]C语言二叉树的实现
- 【mysql】mysql密码设置和更改
- （转）Android 仿订单出票效果 （附DEMO）
- Core官方DI解析(4)--CallSiteRuntimeResolver
- Spring Boot 2.x 学习专栏
- pandas功能使用rename, reindex, set_index 详解
- 【转帖】Systemd 入门教程：命令篇
- 瞅瞅！！免费看VIP视频的技巧
- SpringBoot学习（一）——Spring的发展
- AWS 使用经验
- word自动导入目录
- 【译】Serverless架构 - 3