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布局）