vue 通过路由导航守卫控制访问权限

1.作用：防止用户跳过登录页面直接从url进入后台管理界面,控制访问权限。

2.实现代码

2.1在router/index.js中添加如下代码，

const router = new VueRouter({routes
})
// 挂载路由导航守卫，作用是防止用户跳过登录页面直接从url进入后台管理界面,控制访问权限。
router.beforeEach((to, from, next) => {// to将要访问的路径// from代表从哪个路径跳转而来// next 是一个函数，表示放行。// next() 直接放行 next('/login')强制跳转到登录页面if (to.path === '/login') return next()// 获取tokenconst token = window.sessionStorage.getItem('token')// 判断token是否存在，若存在，直接放行；若不存在，强制跳转到登录页面if (!token) return next('/login')next()
})

vue 通过路由导航守卫控制访问权限相关推荐

Vue - 路由导航守卫控制访问权限，设置 localStorage 过期时间
Vue 路由导航守卫控制访问权限,设置 localStorage 过期时间一. 路由导航守卫二. 路由导航守卫简单使用三. 使用路由导航守卫设置 token 过期时间导航守卫: https: ...
vue路由导航守卫控制访问权限
利用路由的全局前置守卫beforeEach来控制用户的访问权限. 首先是一个登录的页面用户输入完整的信息,点击登录时,会本地存储用户的登录状态,如果在本地存储中存在用户登录过的痕迹,用户可以直接进入 ...
前端学习（2705）：重读vue电商网站26之路由导航守卫控制访问权限
如果用户没有登录,但是直接通过URL访问特定页面,需要重新导航到登录页面. 在之前的操作中,我们登录之后会种植一个 token 值,表示我们登录成功了,那么此时我们将 token 值去掉呢? 直接点击 ...
vue 设置路由导航守卫控制路由跳转
在实际项目中,通常有这样的需求,在用户没有登录的时候通常时不允许访问除了登录页面之外的页面,这个时候就需要使用路由导航守卫来控制跳转了,通常设置如下在router文件夹下的index.js中添加如下 ...
Vue中路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
Vue——vue3路由导航守卫及其写法
导航守卫:一个页面跳转到另一个页面,中间会触发某个函数导航守卫3个状态 <script> export default {methods: {},beforeRouteEnter () ...
前端学习（1871）vue之电商管理系统电商系统之路由导航守卫控制页面访问权限
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
vue动态路由导航栏列表展示权限管理
根据接口获取权限渲染菜单效果图先来看看后台返回数据格式 1.处理后台返回数据 2.整理权限只保留权限名称放入数组 console.log(permissionList) 3.根据router&g ...
功能：登录和退出（表单重置和预验证、路由导航守卫、路由重定向）
3.登录/退出功能 3.1登录概述 3.1-1.登录业务流程 ①在登录页面输入用户名和密码 ②调用后台接口进行验证 ③通过验证之后,根据后台的响应状态跳转到项目主页 3.1-2.登录业务的相关技术点 ...

vue 通过路由导航守卫控制访问权限

1.作用：防止用户跳过登录页面直接从url进入后台管理界面,控制访问权限。

2.实现代码

2.1在router/index.js中添加如下代码，

vue 通过路由导航守卫控制访问权限相关推荐

最新文章

热门文章