vue路由(十)实现有无权限(token)登录跳转判断详细教程

1.1登录成功以后(保存token令牌)进入home首页,进行各种操作。
1.2退出登录(清除token令牌)返回到登录页面。
1.3 没有token时候,直接在浏览去访问一个页面内的路由地址,会跳到登录地址,
    如果有token会直接进入目标页面

下一篇将讲解:,如果登录目标页面没有token令牌,则跳转到login页面登录,登录以后跳转到目标页面

1.login.vue页面,写一个登录页面

<template>
  <div id="app" style="margin: 0px; line-height: 34px; width: 800px">
    <h3>登录页面</h3>
    <el-form
      :model="ruleForm"
      status-icon
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="pass">
        <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="checkPass&#
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 当检测到页面没有Token时,可以使用Vue由守卫来实现登录页面,具体代码如下:router.beforeEach((to, from, next) => {if (!token) {next({ path: '/login' })} else {next()}}) ### 回答2: 在Vue中,可以通过由守卫来控制页面的访问权限。当页面没有Token时,可以通过由守卫来自动登录页。 首先,需要在项目中安装vue-router,可以使用以下命令进行安装: ``` npm install vue-router ``` 然后,在由配置文件中设置由守卫。假设登录页的径为"/login",可以在全局前置守卫中判断页面是否有Token,如果没有,则自动登录页。代码如下: ```javascript // 导入VueVue-router import Vue from 'vue' import VueRouter from 'vue-router' // 安装Vue-router Vue.use(VueRouter) // 创建由实例 const router = new VueRouter({ // 由配置 routes: [ // 其他页面的由配置 ... { path: '/login', component: Login } ] }) // 全局前置守卫 router.beforeEach((to, from, next) => { // 判断是否有Token const token = localStorage.getItem('token') // 假设Token保存在localStorage中 if (token) { // 有Token,允许访问页面 next() } else { // 没有Token登录页 next('/login') } }) // 导出由实例 export default router ``` 在上述代码中,我们在全局前置守卫中判断是否存在Token,如果存在,可以访问页面,如果不存在,会到"/login"页面。 当访问其他需要权限的页面时,会先经过全局前置守卫,根据Token的存在与否执行相应的逻辑。 ### 回答3: Vue由守卫是一种在导航过程中控制页面访问权限的方法。当我们使用Vue框架开发前端应用时,可以通过由守卫来监测用户是否具有正确的登录凭证(如Token),如果没有,则可以将用户重定向到登录页。 下面是一个简单的示例代码,展示了如何使用Vue由守卫来实现上述功能: 在main.js文件中,我们需要引入VueVue Router,并创建一个Vue实例,并使用Vue Router配置由。 ``` import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter) // 定义由 const routes = [ { path: '/login', component: Login }, { path: '/dashboard', component: Dashboard } ] // 创建由实例 const router = new VueRouter({ routes }) // 添加由守卫 router.beforeEach((to, from, next) => { const token = localStorage.getItem('token') // 假设我们的Token存在localStorage中 // 如果用户访问的是登录页,则直接放行 if (to.path === '/login') { next(); } else { // 如果用户已经登录,则继续导航 if (token) { next(); } else { // 如果用户没有登录,则登录页 next('/login'); } } }) // 创建Vue实例并挂载Router new Vue({ router, render: h => h(App) }).$mount('#app') ``` 在上述代码中,我们首先定义了两个由,一个是登录页(Login),一个是仪表盘页(Dashboard)。然后根据用户是否具有Token来控制页面访问权限,在beforeEach导航守卫中进行判断。如果用户访问的是登录页,则直接放行,否则再判断用户是否已经登录。如果用户已经登录,则继续导航到目标页面,否则将用户重定向到登录页。 这样,当页面没有Token时,就会自动登录页。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小云儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值