实现统一登陆身份认证

登录认证
在没有登录的情况下，不允许访问需要登录才能访问的页面，如后台管理系统的主界面，如果没有登录就访问需要token的网页，会直接拦截，并重置到登录页面，提示用户要先登陆。

不多说废话，直接上代码

第一步：安装nprogress

如果使用npm的话：npm install nprogress；如果使用yarn的话：yarn add nprogress；

第二步：在src下面创建permission.js，在里面放入以下代码:

import router from './router'
import NProgress from 'nprogress'
/**
 * 全局前置导航守卫
 * 作用: 拦截处理
 * to: 到达路由
 * from: 出发路由
 *  加载进度效果
 *        => NProgress
 *         => 
 *
 */
import { ElMessage } from 'element-plus'
const whiteArr = ['/', '/login'] // 白名单
router.beforeEach(to => {
    // 1.NProgress 开始
    NProgress.start()

    console.log('beforeEach to ', to)
    //  1. 直接放行不需要认证的路由
    const isOk = whiteArr.some(item => item === to.path)
    if (isOk) {
        return true // 放行
    }

    // 2. 登录认证
    // 如果已经登录放行,没有登录跳转到登录界面
    const token = localStorage.getItem('TOKEN')
    if (token) {
        return true // 放行
    } else {
        ElMessage.error('请登录')
        // 重定向登录界面
        return { path: '/login' }
    }
    // return false // 阻止路由跳转
})

/**
 * 全局后置导航守卫
 */
router.afterEach((to, from) => {
    console.log('afterEach', to, ' to ', 'from ', from)
    NProgress.done()
})

第三步：在main.js里面引入import './permission'，这样就算完成了。

如果有用的话，给我个赞支持一下吧，嘿嘿