vue限制不登录无法进入其他页面

news/2024/7/24 2:20:37

vue限制不登录,通过url进入其他页面强制回到登录页面;已经登录了,不可以再进入登录界面

先在router下的index.js添加 meta:{requireAuth:true},如下

{
  path: '/data',
  name: 'data',
  component: data,
  meta:{requireAuth:true}
},

然后在main.js添加如下代码

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if(localStorage.getItem('userInfo')){ //判断本地是否存在access_token
      next();
    }else {
     if(to.path === '/login'){
        next();
      }else {
        alert('请先进行登录!')
        next({
          path:'/login'
        })
      }
    }
  }
  else {
    next();
  }
  /*如果本地 存在 token 则 不允许直接跳转到 登录页面*/
  if(to.fullPath == "/login"){
    if(localStorage.getItem('userInfo')){
      alert('您已经登录了,如果想要登录其他账号,请先退出当前账号!')
      next({
        path:from.fullPath
      });
    }else {
      next();
    }
  }
});

或者是

router.beforeEach((to, from, next)=> {
 let userInfo = localStorage.getItem('userInfo')
 let list = ['login','checking','register','phoneLogi','chat','GroupSharing','new_file','videoChat',]//多个路由
 if (userInfo || list.indexOf(to.name) !== -1) {
   next()
 }
 else {
   next({
     name:'login'
   })
 }
  // next()
})

参数说明:

* to: Route: 即将要进入的目标 路由对象
* from: Route: 当前导航正要离开的路由
* next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。


http://www.niftyadmin.cn/n/861529.html

相关文章

vacode常用快捷键大全

vscode的快捷键 1.快速复制上下行 shift alt ↑2.快速选中相同的单词,然后批量修改 Ctrl d3.快速查找相同的单词 Ctrl f4.关闭侧边栏 Ctrl b5.跳到特定的行 Ctrl g6.选择特定标签或者变量等等跳转 shift Ctrl o*通用*CtrlShiftP, F1打开命令面板Ctrl…

axios的请求拦截器和动态loading的

axios的请求拦截器和动态加载loading,两个结合 在这里使用的是,vueaxioselementUI来实现的 import axios from axios // axios.defaults.baseURL /api import browser from ../common/browser import qs from qs;import { Loading } from element-ui …

计网笔记(一)

1.物理层 物理层更多的是规定一种标准,他并不管物理介质具体是什么,比如电线杆上是光纤还是双绞线,只要你能按物理层规定的标准传输数据就行。 物理层是规定传输媒体接口的标准 2.数据链路层 数据链路层的主要功能 (1) 封装成帧 数据链路…

vscode的针对vue的template的注释失效变成//

vscode的针对vue中template的注释失效变成// 忘记那一天了,vscode提示安装一个插件,Vue 3 Snippets Highlight Formatters And Generator,我就顺手点了一下;然后就发现我的快捷键注释template的变成了下面这个样式。所以只要把这…

box-shadow使用

box-shadow: 参数 x:水平阴影,可以为负值,当为负值时,阴影从外面(默认为外阴影)向左移动;当为正值时,阴影从外面(默认为外阴影)向右移动。即正方向为向右和向…

vue创建WebSocket进行实时通讯

vueWebSocket创建实现实时通讯 //websocketasync initWebSocket() {if (websock) {return;}if (!const_chatid) return;if (typeof WebSocket "undefined") {console.error("您的浏览器不支持WebSocket");return false;}try {let params {user_id: loca…

elementUI的动态tabs页的使用,vue的动态组件的操作

elementUI的动态tabs页的使用&#xff0c;vue的动态组件的操作 有时候我们需要用到动态的tab页&#xff0c;结合不同的页面内容来显示。这里是使用了elementUI的动态tabs页来实现的 <div class"right" v-loading"loading"><div class"betw…

:nth-last-of-child()与:nth-last-of-type()

nth-child(n) ele:nth-child(n)选中ele元素&#xff0c;且ele是某个元素下的第n个元素 p:nth-child(n) ---->选中p元素&#xff0c;且该p元素必须是某个父元素下的第n个子元素 这里的n是从1开始的 li:nth-child(n6)&#xff1a;选中从第6个开始的子元素&#xff08;即n从0…