路由守卫

路由守卫

import router from './router' // 路由
import store from './store' // vuex


const whiteList = ['/login','/404']  白名单： 去登录页面和报错页面不需要token

 全局前置路由守卫
router.beforeEach(async(to, from, next) => {

      判断vuex中token是否有值
  if (store.getters.token) {
--------------------------------------
      已登录情况下,判断是否要去登录页面
    if (to.path === '/login') {
      next('/') // 禁止跳转
      console.log('已登陆，不能再访问登录界面')
    } else {
      //从vuex的方法中 获取到用户数据
      await store.dispatch('user/getUserProfile')
      // 已登录,要去的不是登录界面，就直接放行
      next()  可以跳转
    }
--------------------------------------
  }
  else {   没有token , 跳到指定页面
--------------------------------------
     要去登录界面放行
    if (whiteList.includes(to.path)) {
      
      next() // 可以跳转
    } else {
      // 去哪个页面都只能跳回到指定的登录页面
      next('/login')
    }
--------------------------------------
  }

})

跳转完成后执行的函数
router.afterEach(() => {  执行代码  })

 

添加NProgress 网页加载进度条:

import NProgress from 'nprogress'  // 引入模块
import 'nprogress/nprogress.css'   //引入模块样式

然后在路由守卫中 页面跳转之前启动进度条

两种函数：
在跳转之前执行
1、Vue.beforeEach(function(to,form,next){
开启进度条:  NProgress.start()
}) 

在跳转之后判断
2.Vue.afterEach(function(to,form) { 
NProgress.done()  在跳转之后结束进度条:  
} ) 

 

includes( ) 方法

用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

代码示例：

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false

 

 

 

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。SVG 使用 XML 格式定义图像。:https://www.runoob.com/svg/svg-tutorial.html 它是一种图片格式

 

 

 

退出登录后,重新登录跳回到之前的页面

获取当前页面的地址 : 

 

this.$route.fullPath    获取页面地址+参数可以
this.$route.path     只有路径的信息, 带不上后面的参

指定事件触发后 从当前页面跳到路径 ? 后面的指定页面

return 是自己定义取的名字

如何获取到路径 ? return=  后面的 内容

1. 通过 this.$route.query.return  获取到
2. 如何跳转到?后面的路径 通过

this.$router.push(this.$route.query.return)

 

指定事件触发后 把当前页面路径传到跳转页面的路径 后面

1. 通过路由跳转传参的方式

this.$router.push({

    name: 'login',

    query: {return: this.$route.path}

                          })

1. 通过直接跳路由地址 拼接的方式

this.$router.push('/login?return=' + this.$route.fullPath)

 

 

 

 

 

在 getters.js 文件中 定义全局getters

声明一个 对象变量 , 把里面的属性 写好对应的值
const getters = {

  token: state => state.user.token, 
  name: state => state.user.name

}


导出 对象变量
export default getters

// state是vuex管理器  , user是命名空间名  , name 是state下的变量

在创建Vuex 的文件中导入 getters

import getters from './getters.js'

 

然后添加到 实例化 store 对象身上 (vuex数据管理者) 

 

const store = new Vuex.Store({

  modules: {  // modules下是命名空间
    app,
    settings,
    user
  },
  getters

})

使用方法:

通过辅助函数 mapGetters  调用   

...mapGetters(['token','name' ])

直接使用:

{{ $store.getters.name }}