使用vue-router+vuex进行导航守卫(转)
前言:想要实现登录后才能进入主页等其他页面,不然都会跳转到登录页。但是Vuex有个不够完美的地方,一旦刷新页面就会没了,所以还要用到localStorage。
一、router.js:
import Vue from 'vue'
import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import store from '../store/index' Vue.use(Router); // 懒加载组件 const login = () => import('Components/common/login/index.vue'); const loading = () => import('Components/common/loading/index.vue'); const home = () => import('Pages/home/home.vue'); const user = () => import('Pages/userManage/index.vue'); const addUser = () => import('Pages/userManage/add/index.vue'); const editUser = () => import('Pages/userManage/edit/index.vue'); const menu = () => import('Pages/menuManage/index.vue'); const umbrella = () => import('Pages/umbrellaManage/index.vue'); const location = () => import('Pages/locationManage/index.vue'); const order = () => import('Pages/orderManage/index.vue'); const test = () => import('Pages/test.vue'); const routes = [ // 登录页面 { path: '/login', name: "login", component: login, meta: { requiresAuth: false } }, { path: '*', redirect: '/home', name: 'HelloWorld', component: HelloWorld, children: [ // 测试页面 { path: '/test', component: test, meta: { requiresAuth: true } }, // loading页面 { path: '/loading', name: "loading", component: loading, meta: { requiresAuth: true } }, // 主页 { path: '/home', component: home, meta: { requiresAuth: true } }, // 用户管理 { path: '/user', component: user, meta: { requiresAuth: true } }, { path: '/user/add', name: 'addUser', component: addUser, meta: { requiresAuth: true } }, { path: '/user/edit', name: 'editUser', component: editUser, meta: { requiresAuth: true } }, // 菜单管理 { path: '/menu', name: 'menu', component: menu, meta: { requiresAuth: true } }, // 雨伞管理 { path: '/umbrella', name: 'umbrella', component: umbrella, meta: { requiresAuth: true } }, // 租借点管理 { path: '/location', name: 'location', component: location, meta: { requiresAuth: true } }, // 订单管理 { path: '/order', name: 'order', component: order, meta: { requiresAuth: true } }, ] } ]; // 页面刷新时,重新赋值有没登录 if (window.localStorage.getItem('isLogin')) { store.commit('setIsLogin', window.localStorage.getItem('isLogin')); } const router = new Router({ routes }); router.beforeEach((to, from, next) => { if (to.matched.some(r => r.meta.requiresAuth)) { // 判断该路由是否需要登录权限 console.log(store.getters.isLogin); if (store.getters.isLogin) { // 通过vuex 如果当前有登录 next(); } else { console.log("没有登录吖") next({ path: '/login', query: {redirect: to.fullPath} }) } } else { next(); } }); export default router;
这里有四个需要重点关注的地方(引入和使用就不纳入其中了):
1.单独一个routes数组用来存放路由变量,然后每一个路由对象都需要有个meta参数,里面有个requiresAuth(也可以命其他名),这个就是用来判断这个页面需不需要判断权限,所以login页面为false,其他页面都为true。
2.new一个router对象,刚刚在注意点1的数组作为参数,然后最后导出这个router对象给其他页面引用。
3.要有一个判断页面刷新,重新赋值有没登录。这个时候判断localStorage中的isLogin,如果为true,所以刷新前是有登录的,则提交触发vuex更改状态。
4.vue-router提供的钩子函数,在路由更换的时候,都会触发这个函数,这个时候就要用到注意点1的meta.requiresAuth,如果即将要进入的页面需要判断登录权限,检测vuex的isLogin,为true就可以进去,不然都跳转到登录页面。
二、Vuex
modules/login.js
const login = {state: {// true为已经登录,false为没登录isLogin: false }, mutations: { setIsLogin(state, isLogin) { state.isLogin = isLogin; } }, actions: { }, } export default login;
getters.js
const getters = {isCollapse: state => state.nav.isCollapse, isLogin: state => state.login.isLogin }; export default getters
index.js
import Vue from 'vue';
import Vuex from 'vuex'; import nav from './modules/nav' import login from './modules/login' // import app from './modules/app'; // import user from './modules/user'; // import menu from './modules/menu'; import getters from './getters'; Vue.use(Vuex); const store = new Vuex.Store({ strict: process.env.NODE_ENV !== 'production', modules: { nav, login // app, // user, // menu }, getters }); export default store
三、实际使用-->登录
handleSubmit() {this.$refs["loginForm"].validate((valid) => { if (valid) { if(this.loginForm.userName === "admin" && this.loginForm.password === "admin") { this.$notify({ title: '恭喜你', message: '登录成功!', type: 'success' }); // 触发setIsLogin方法改变vuex中isLogin的值, this.$store.commit('setIsLogin', true); // 改变localStorage中isLogin的值, window.localStorage.setItem('isLogin', true); // Cookies.set('Token', response.data.token) this.$router.push({path: '/home'}); } else { this.$message({ message: '登录失败:密码错误!', type: 'warning' }); } } else { console.log('error submit!!'); return false; } }); },
四、实际使用-->退出登录
handleCommand(command) {if(command === "exit") {// 触发setIsLogin方法改变vuex中isLogin的值,this.$store.commit('setIsLogin', false); // 改变localStorage中isLogin的值, window.localStorage.setItem('isLogin', false); this.$notify({ title: '退出登录成功', message: '请重新登录', type: 'success' }); this.$router.push({path: '/login'}); } }
<el-dropdown @command="handleCommand"><span class="el-dropdown-link"> 欢迎你,{{name}}<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="exit">退出登录</el-dropdown-item> </el-dropdown-menu> </el-dropdown>
作者:Lia代码猪崽
链接:https://www.jianshu.com/p/f920b0e994dc
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
转载于:https://www.cnblogs.com/snowhite/p/11277429.html
使用vue-router+vuex进行导航守卫(转)相关推荐
- Vue+Vue Router+Vuex页面演示
Vue+Vue Router+Vuex简单页面演示 1.目录结构(使用vue-cli创建) 2.编写代码 src/router/index.js import Vue from "vue&q ...
- Vue(小码哥王洪元)笔记06路由,url的hash,history,router-linke,路由跳转,动态路由,懒加载,路由嵌套,router参数传递,导航守卫
1.什么是路由 路由器提供了两种机制:路由和传送 路由:数据报从来源到目的地的路径 传输:将输入端的数据转移到合适的输出端 路由有一个非常重要的概念教路由表 路由表本质上就是一个映射表,决定了数据包的 ...
- Vue Router 组件内的守卫、导航解析流程
可以在路由组件内直接定义路由导航守卫(传递给路由配置的) 可用的配置 API beforeRouteEnter 在渲染该组件的对应路由被验证前调用. 此时不能获取组件实例 this , 因为当守卫执行 ...
- vue中的组件导航守卫,个人理解
vue中组件导航守卫 beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave 今天有遇到一个问题,就是在一个页面 新增模块按钮 和 编 ...
- Vue 2.0 + Vue Router + Vuex 后台管理系统的骨架
https://github.com/helloyoucan/ba 用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node ...
- 【Vue】vue中的路由导航守卫(路由的生命周期)
文章目录 全局前置守卫 可选的第三个参数 `next` 全局解析守卫 router.beforeResolve 全局后置钩子 路由独享的守卫 组件内的守卫 可用的配置 API 使用组合 API 完整的 ...
- 走进Vue【四】导航守卫和路由原信息详解
文章目录
- Vue Router 路由管理
文章目录 Vue Router 路由管理 概述 安装 简单使用 定义2个组件 定义路由信息 支持路由 使用路由 动态路由 配置动态路由 配置404 限制动态参数 嵌套路由 命名路由 编程式导航 简单使 ...
- vue-router 的总结(导航守卫、组件过渡、组件间参数传输、懒加载)
在实际项目中很多地方需要router的运用,下面从实践运用的例子总结一下需要引用router的地方 导航守卫:当用户没有登录时,限制用户不能访问某些页面 组件过渡,当页面中切换会出现动态的切换效果 组 ...
- 路由导航守卫和路由拦截
1.如果用户没有登录,但是直接通过URL访问特定网页,需要重新导航到登录页面 router.beforeEach(( to, from , next ) => { //如果用户访问的登录页,直接 ...
最新文章
- 隔空投送所有人安全吗_Find X2将采用2K+120Hz屏幕,支持65W;安卓将拥有“隔空投送”;“杀毒霸主”Avast被曝偷卖4.35亿用户数据;...
- 二叉树层序遍历递归与非递归_总结归纳:二叉树遍历【递归 amp;amp; 非递归】...
- AI:狄拉克之海上的涟漪
- linux sudo 版本,Linu下如何升级当前sudo版本
- Tomcat学习总结(10)——Tomcat多实例冗余部署
- android volley 线程,android第三方框架(一)过时的框架volley
- js日期时间控件------layDate
- 如何在EDUIS中导出ETL字幕模板_给视频加字幕?这8个工具助力你的短视频创作!...
- c++ 返回空对象_python中file对象的常用方法
- Discuz 2.0 英文版 源码分析 一
- php显示有关html函数,php中与html标签相关的函数有哪些
- 【HTML——代码雨】(效果+代码)
- JSPSSM316的网上水果生鲜销售商城系统java毕业设计成品源码介绍
- 如何才能高效学习,99%的人不知道的高效学习法
- 接触【专利写作】的必备知识(包含少部分撰写技巧)
- 基于NLP的书法字体分析、统计及可视化
- Photoshop中出现“要求96和8之间的整数。已插入最接近的数值”解决方法
- JAVA:实现QuickSort快速排序算法(附完整源码)
- 四种常见的 POST 提交数据方式对应的 content-type 取值
- HT1621中文资料