用途:

在vue中我们一般把登录拦截及权限处理在permision.js文件中并在min.js中导入;

当页面跳转时判断用户是否登录及token是否过期,若token过期/未登录则会重定向到login页面;

但有些项目除了登录页还有用户注册页面,此时需要设置白名单使得可以直接从login页面跳转至regist页面而不会被重定向到login页;

permision.js:

import router from './router'
import store from './store'
import {
  Message
} from 'element-ui'
const whiteList = ['/login','/regist'] //白名单

router.beforeEach(async (to, from, next) => {
  // 确定用户是否已经登录
  const hasToken = localStorage.getItem('token')

  if (hasToken) {
    if (to.path === '/login') {
      // 如果已登录,则重定向到主页
      next({
        path: '/'
      })
    }else{
      //权限处理部分,可参考vue-element-admin框架中permision.js权限处理部分
    }
  } else {
    //没有token的情况
    if (whiteList.indexOf(to.path) !== -1) {
      // 如果在白名单内则直接跳转
      next()
    } else {
      // 其余页面重定向到登录页
      next(`/login?redirect=${to.path}`)
    }
  }
})

切记要在min.js中引入该js:  import './permission'

GitHub 加速计划 / vu / vue-element-admin
87.26 K
30.42 K
下载
PanJiaChen/vue-element-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统模板,支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
最近提交(Master分支:2 个月前 )
0caa975e - 2 年前
cd3f7267 - 2 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐