导航守卫 登录拦截

主要利用beforeEach

在router/index.js下

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//引入组件
import Home from './../components/home'
import Main from './../components/main'
import Hot from './../components/hot'
import Other from './../components/other'
import Login from './../components/login'
var router = new VueRouter({
    routes:[
        {
            path:'/home',
            component:Home,
            name:Home
        },
        {
            path:'/main',
            component:Main,
            name:Main
        },
        {
            path:'/hot',
            component:Hot,
            name:Hot
        },
        {
            path:'/other',
            component:Other,
            name:Other
        },
        {
            path:'/login',
            component:Login,
            name:Login
        },
        {
            path:'/',
            redirect:'/home'
        }
    ]
})
//导航守卫 全局前置守卫
//to: 要进入的路由目标(去哪里)
//from: 当前导航正要离开的路由(从哪儿来)
//next : 一定要调用该方法来 resolve 这个钩子  (执行)
 router.beforeEach((to, from, next)=>{
  if(to.path !== '/login'){
    if(localStorage.getItem("key")){
        next()
    }else{
        next('/login')
    }
  }else{
      next()
  }
})
export default router

其他主要代码如下

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <Tab />
    <router-view></router-view>
  </div>
</template>

<script>
import Tab from './components/tab'
export default {
  name: 'app',
  components:{
    Tab
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

components/tab.vue

<template>
    <div class="tab">
        <span @click="tabPath('/home')" :class="{active:$route.path.includes('/home')}">主页</span>
        <span @click="tabPath('/main')" :class="{active:$route.path.includes('/main')}">主要</span>
        <span @click="tabPath('/hot')" :class="{active:$route.path.includes('/hot')}">最热门</span>
        <span @click="tabPath('/other')" :class="{'active':$route.path.includes('other')}">其他</span>
        <span @click="tabPath('/login')" :class="{'active':$route.path.includes('login')}">登录</span>
    </div>
</template>
<style scoped>
    span{
        margin: 2px 4px;
        background: #cccccc;
        cursor: pointer;
    }
    .active{
        color: red
    }
</style>
<script>
export default {
    name:'Tab',
    methods:{
        tabPath(path){
            this.$router.push(path)
        }
    }
}
</script>

components/home.vue

<template>
    <div class="home">
        我是主页
    </div>
</template>
<style scoped>
.home{
    color: aqua
}
</style>
<script>
export default {
    name:'Home'
}
</script>

其他均与home类似  这里就省略了

在 Uniapp 中,可以使用路由守卫来实现登录拦截。路由守卫是用来在路由导航过程中进行拦截和控制的机制,可以在路由跳转之前或之后执行一些操作。 要实现登录拦截,可以在全局的 main.js 文件中配置路由守卫。以下是一个简单的示例: ```javascript // main.js // 导入uni-app的路由模块 import Vue from 'vue' import App from './App' import router from './router' // 在路由跳转之前执行的操作 router.beforeEach((to, from, next) => { // 判断用户是否已登录 const isLogged = false; // 根据你的业务逻辑判断用户是否已登录 if (to.meta.requireAuth && !isLogged) { // 如果目标路由需要登录,并且用户未登录,则跳转到登录页 next('/login'); } else { // 否则,放行路由 next(); } }); // 创建Vue实例 new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) ``` 在上述代码中,我们使用 `router.beforeEach` 方法来定义一个全局的路由守卫。在每次路由跳转之前,会先执行这个回调函数。在回调函数中,我们通过判断用户是否已登录来决定是否进行拦截。 如果目标路由需要登录(通过 `to.meta.requireAuth` 来判断),且用户未登录,则通过 `next('/login')` 跳转到登录页。否则,直接调用 `next()` 放行路由。 需要注意的是,以上只是一个简单的示例,你可以根据你的业务需求来进行相应的调整和扩展。另外,还可以在具体的路由配置中,通过设置 `meta` 字段来定义哪些路由需要登录验证。例如: ```javascript // router.js import Vue from 'vue' import Router from 'vue-router' import Home from '@/views/Home' import Login from '@/views/Login' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home, meta: { requireAuth: true // 需要登录验证 } }, { path: '/login', name: 'Login', component: Login } ] }) ``` 在上述代码中,我们在路由配置中为 Home 路由添加了 `meta.requireAuth` 字段,并设置为 `true`,表示需要登录验证。这样在全局的路由守卫中,就可以根据这个字段来判断是否进行拦截。 希望这个回答对你有帮助!如果还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值