vue+elementUI后台系统(第五章:权限设置)

目录

前言

一、设置跳转条件

二、全局引入

总结


前言

前一章我们已经写出来登录页面和首页,用户登录成功后会跳转至首页。那么问题来了,如果用户未登录,但输入了首页的路由,页面会跳转吗?当然会,但这明显不符合逻辑呀,所以这一章得目的是判断用户是否登录,若没有登录,即使输入了路由也不会跳转到首页。这相当于权限得设置,同时我们使用技术是路由的重定向,使用户输入 ' / ' 时候也能跳转至首页(' /home ')。


一、设置跳转条件

首先,在src新建premiss.js文件(与main.js同级),输入以下代码:

//导入路由
import router from './router'
//在路由跳转前判断是否有登录信息,没有则不跳转页面,反之则跳转
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    localStorage.removeItem('token')
  }
  var user = localStorage.getItem('token')
  if (!user && to.path !== '/login') {
    next({
      path: '/login'
    })
  } else {
    next()
  }
})

解释:登录的时候,我们将登录数据提交进行了本地存储。当检测到没有数据的时候,页面只会在登录页,不能跳转到其他页面。

二、全局引入

设置好权限后,我们需要全局引入,打开main.js,引入premiss.js,如下图:

到这里就可以啦~


总结

以上就是今天要讲的内容,本文对用户跳转页面进行了判断,未登录者不可跳转页面。

上一章vue+elementUI后台系统(第四章:登录页面及Scss/Sass)

下一章vue+elementUI后台系统(第六章:路由嵌套与layout布局)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值