Vue——多页面不共用token进行拦截

简介: 多页面不共用token进行拦截

如果想实现一个效果,将token值清除后刷新页面回到登录页面并且可以跳转到注册页面。需要使用beforeEach来实现

这里需要添加一个用来放开token权限的变量,

{
    path: '/404',
    name: '/404',
    component: NotFound
  },
  {
    path: '/',
    name: 'login',
    component: Login,
  },
  {
    path: '/register',
    meta: {
      nacy: "true"
    },
    name: 'register',
    component: Register,
  },
router.beforeEach((to, from, next) => {
  var token = sessionStorage.getItem('token')//存储token
  if (to.name) {
    if (token || to.meta.nacy == 'true') {//to.meta.nacy=='true'这里面的nacy就是自己在路由中设置的//不参与token验证的页面参数变量这个变量可以自己定义
      next()
    } else {
      if (to.path == '/') {
        next()
      } else {
        next('/')
      }
    }
  }
});
相关文章
|
2天前
|
存储 缓存 JavaScript
谈谈你对vue的了解
谈谈你对vue的了解
11 3
|
2天前
|
JavaScript API
Vue axjx 跨域请求
Vue应用中解决跨域问题可通过配置代理服务器。方法一是设置`devServer.proxy`到目标服务器端口,如`http://localhost:3000`,然后使用axios发送请求。方法二是为多个代理配置,如`/api`和`/api2`,分别指向不同端口,利用`pathRewrite`重写路径。请求时需加上相应前缀,如`/api/index`。
10 1
|
2天前
|
JavaScript 前端开发 Java
JavaSE精选-Vue
JavaSE精选-Vue
7 1
|
3天前
|
JavaScript
vue知识点
vue知识点
15 2
|
3天前
|
JavaScript
Vue父子组件传值
<!-- 父组件向子组件传地值 -->
12 2
|
JavaScript 数据安全/隐私保护
work02_vue页面打印水印
work02_vue页面打印水印
279 0
work02_vue页面打印水印
|
10天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
28 0
|
10天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
3天前
|
JavaScript Java
Vue : v-if, v-show
Vue : v-if, v-show
13 0
Vue : v-if, v-show
|
3天前
|
JavaScript 前端开发
Vue : 监视属性
Vue : 监视属性
9 0