vuex+vue-router拦截
干就完了
项目中经常遇到这样一个场景,用户信息或者进行增删改的一些模块,需要根据用户是否登录,进行路由拦截,直接上代码
在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 = falseconst 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,完美
转载于:https://www.cnblogs.com/haoluck/p/9226250.html
vuex+vue-router拦截相关推荐
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)...
昨日内容回顾 0. 组件注意事项!!!data属性必须是一个函数!1. 注册全局组件Vue.component('组件名',{template: ``})var app = new Vue({el: ...
- reload vue 重新加载_vue面试,谈下router拦截
最近开始准备面试,尽管是电话面试全身还是充斥着紧张感,一面感觉还不错,主要是问react和vue的一些生命周期,介绍下redux...,二面印象深刻的是问到了介绍下router拦截,我觉得还是个人对r ...
- Vue+Vue Router+Vuex页面演示
Vue+Vue Router+Vuex简单页面演示 1.目录结构(使用vue-cli创建) 2.编写代码 src/router/index.js import Vue from "vue&q ...
- Vue 2.0 + Vue Router + Vuex 后台管理系统的骨架
https://github.com/helloyoucan/ba 用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node ...
- vue --- http拦截,登录登出的逻辑设计
设计 在src目录下创建一个interceptor.js 登录逻辑 设置拦截,在发起请求前,先判断用户是否登录(在本栗中,即是否能够在浏览器缓存中找到token). 登出逻辑 对服务端传过来的数据进行 ...
- vue router.beforeEach(),详解
router.beforeEach()一般用来做一些进入页面的限制.比如没有登录,就不能进入某些页面,只有登录了之后才有权限查看某些页面...说白了就是路由拦截. 第一步 规定进入路由需不需要权限 @ ...
- 你可能不清楚的 Vue Router 深度用法(一)
Vue Router 简单易上手,能实现大部分的需求.但是,如果在项目里需要更细致的控制路由,以实现与其同步的效果,就需要挖掘其文档里没详细提及的内容.第一章为路由元信息用途挖掘. 路由元信息用途 ( ...
- vue请求拦截 给所有的api接口的请求 params 带上一个存储的值及qs的安装
vue请求拦截 给所有的api接口的请求 params 带上一个存储的值: Vue.prototype.$http = axios; // 设置请求拦截器,为请求对象添加token,这是后续权限api ...
- vue 什么是渐进式 响应式 意思。Vue常用的指令。VUE:跨域设置。vue router 新窗口。$router.push。
Vue 是 轻量的 模型视图视图模型 框架.就是数据的双向开发. 数据驱动+组件化开发. 渐进式框架. 官网:cn.vuejs.org 在读 Vue2.0 文档的时候,介绍"Vue.js( ...
- Vue2.x - Vue Router
目录 Vue与SPA 什么是SPA 简单了解SPA 什么是MPA SPA相较于MPA的优点 实现SPA的几个关键点 理解SPA单页面架构 什么是前端路由 锚链接与URL中的hash值 通过hashch ...
最新文章
- 高并发BUG排查,警惕高权限又不受监管的运维行为
- Windows系统内存分析工具的介绍
- b2b b2c o2o电子商务微服务云平台
- 访问数组元素进行赋值
- 未来是Apache Karaf上的微服务架构
- 一天一道算法题--6.15--卡特兰数
- struts的开发模式
- 操作失败10秒内未完成启动服务mysql_01-MySQL 命令行-cmd用法-未完成
- jquery双击一行跳转页面_Word软件使用小技巧,鼠标双击在不同操作对象中有不同的功能...
- html page背景图片,html – Fullpage.js背景图片
- 【R图秀-6】地震来了
- 【iptables】编写iptables防火墙规则-2
- C++面向对象课程设计实例-图书馆借阅系统
- 加速计/陀螺仪/磁力计是什么,3轴/6轴/9轴传感器又是什么?
- 计算机桌面文件能单独设密码吗,文件夹怎么设置密码,教您如何给电脑上文件夹设置密码...
- 什么是外汇EA呢?工作的原理又是什么呢?送给不懂外汇EA
- 科技企业的技术文化为什么难写?
- 史上好电影集合--百度云
- Google Pay 谷歌支付(gateway = stripe)
- 数值计算之 插值法(5)分段插值,埃尔米特插值
热门文章
- 2013年3月百度之星B题
- Sql存储过程加密和解密
- Effective C++ 50条款
- i7 7700hq安装Linux,黑苹果安装火影金刚4K VULCAN JinGang GTX i7-7700HQ 独显驱动 Hackintosh...
- ue4 4.24启动无响应_UE4项目问题集合
- java jlist 更新_java – 更新JList
- chrome登录_比Chrome还要好用?(全新edge浏览器体验)
- java foreach delete_Java CopyOnWriteArrayList forEach()用法及代码示例
- c语言实现图形界面实现四则运算,C语言实现四则运算的生成器
- mysql数据库建仓范式_存mysql个数