vue+elementUI后台系统（第五章：权限设置）

最新推荐文章于 2024-05-08 21:39:38 发布

DW14687

最新推荐文章于 2024-05-08 21:39:38 发布

阅读量976

点赞数 2

分类专栏： vue项目搭建

本文链接：https://blog.csdn.net/DW14687/article/details/119206215

版权

vue项目搭建专栏收录该内容

6 篇文章 13 订阅

订阅专栏

前言

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

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