vuex模块化配合vue-router全局路由守卫做登陆权限控制

一，实现vuex的模块化使用

二，创建vue-router全局路由守卫做登陆权限控制的文件

当我们使用vue-router创建路由之后，这时是可以切换url随意访问任意页面的。
为了让login和404页面不需要登陆就可以访问，而其他页面则需要登陆后才可以访问。
就需要使用全局路由守卫做登陆权限来控制。
persission.js

import router from "@/router";
import store from "@/store";
import NProgress from "nprogress";
import "nprogress/nprogress.css";NProgress.configure({ showSpinner: false });//免登陆白名单
const whiteList = ["/login", "/404"];function permission(to, next) {if (store.state.login.x_user_token) {// 已登录if (to.path === "/login") {next();NProgress.done();} else {to.matched.length === 0 ? next("/404") : next();}} else {// 未登录if (whiteList.indexOf(to.path) !== -1) {// 在免登录白名单，直接进入next();} else {next(`/login?redirect=${to.fullPath}`); // 未登录重定向到登录页NProgress.done();}}
}router.beforeEach(async (to, from, next) => {NProgress.start();permission(to, next);
});router.afterEach(() => {NProgress.done();
});

然后再在入口文件中引入即可：

import "./router/permission"; // permission control

vuex模块化配合vue-router全局路由守卫做登陆权限控制相关推荐

全局路由守卫，独享路由守卫，组件内路由守卫
路由守卫: 1.作用:对路由进行权限控制 2.分类:全局路由守卫,独享路由守卫,组件内路由守卫 3.全局路由守卫:在router=>index.js const routes =[ {path: ...
5分钟学会vue中的路由守卫
5分钟学会vue中的路由守卫在项目开发中每一次页面的跳转或者刷新,都需要判断用户是否已经登录.后端会进行判断的,前端最好也进行一次判断. vue-router提供了导航钩子:全局前置导航钩子 bef ...
全局路由守卫和局部路由守卫
全局路由守卫和局部路由守卫今日有童鞋问我全局的路由守卫怎默写我直接细心地教了教他,现在我更新一下博客里面的全局路由守卫和单个的路由守卫希望对你们有所帮助! 注(我的数据是保存到vuex里面的) 此 ...
Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战前言一.什么是单页面应用及实现前端路 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局！
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
你真的理解 Vue Router 的路由模式吗？
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局~
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
vue中的路由守卫(导航守卫)
在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录,前端可以判断,后端也会进行判断的,我们前端最好也进行判断. vue-router提供了导航钩子:全局前置导航钩子 beforeEa ...
vue router children 路由变了组件没变_Vue.js从零开始——路由（2）
因为一些原因,我断更了几天时间,因为要准备面试 + 不在家,抱歉大家! 题图是一个大概的 Vue 模块化项目组成,当然因为我从网上找的,所以可以忽略当中的 Bulma,这其实是一个 CSS 框架,往简 ...
Nuxt中全局路由守卫的写法
1.在middleware中定义,全局middleware或布局middleware中:(server端执行) 全局middleware中定义: a.在middleware文件夹下新建auth.js文 ...

vuex模块化配合vue-router全局路由守卫做登陆权限控制

一，实现vuex的模块化使用

二，创建vue-router全局路由守卫做登陆权限控制的文件

vuex模块化配合vue-router全局路由守卫做登陆权限控制相关推荐

最新文章

热门文章