vue:路由导航守卫控制页面访问权限

当前/home对应的页面,只有在登录的情况下才允许被访问,如果是未登录状态是不允许让你看到/home对应的页面的。现在sessionStorage中记录了一个token,证明我们已经处于登录的状态。如果把token清除掉,即处于未登录状态,此时再刷新页面,发现此时没有登录也能看到这个组件,这时就不满足我们的需求了,因为/home是一个有权限的页面,只有在登录的情况下才允许被访问,如果没有登录,希望你从/home路径直接直接跳转到登录页,此时通过路由导航守卫来实现。

路由对象调用beforeEach函数,beforeEach就叫导航守卫,beforeEach接收一个回调函数,回调函数包含三个形参,即to,from,next,其中to代表我们将要访问的路径,from代表我们从哪个路径跳转而来的。Next代表一个放行的函数。接下来就可以判断to所对应的那个地址是否是“/login”,如果等于“/login”,证明用户要访问登录页,而登录页是没有权限的,任何人都可以访问登录页,故直接调用next()函数放行;如果你访问的不是登录页,则判断sessionStorage中是否存了一个token,如果没有token,证明你没有登录而且你访问的是那些有权限的页面,此时要强制用户跳转到登录页面;如果经过判断,用户已经有了一个token,故还是直接调用next()放行。

vue:路由导航守卫控制页面访问权限

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Home from '../components/home.vue'
import Welcome from '../components/welcome.vue'
import Users from '../components/user/users.vue'
import Roles from '../components/power/roles.vue'
import Rights from '../components/power/rights.vue'
import Cate from '../components/goods/Cate.vue'
import Params from '../components/goods/params.vue'
import GoodsList from '../components/goods/List.vue'
import AddGoods from '../components/goods/Add.vue'
import Order from '../components/order/Order.vue'
import Report from '../components/report/Report.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: Login },
  { path: '/home',
    component: Home,
    redirect: '/welcome',
    children: [
      { path: '/welcome', component: Welcome },
      { path: '/users', component: Users },
      { path: '/roles', component: Roles },
      { path: '/rights', component: Rights },
      { path: '/categories', component: Cate },
      { path: '/params', component: Params },
      { path: '/goods', component: GoodsList },
      { path: '/goods/add', component: AddGoods },
      { path: '/orders', component: Order },
      { path: '/reports', component: Report }
    ] }
]

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  if (to.path === '/login') return next()
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

export default router

在router目录下的index.js文件中,在暴露export路有对象之前,挂载一个路由导航守卫

vue:路由导航守卫控制页面访问权限

获取到的tokenStr可能是一个空值,也可能是一个真正的token,if(!tokenStr)表示tokenStr为null,证明你没有登录,故强制跳转到登录页面。
JS手册中提到: 可以使用任意表达式作比较表达式。任何值为0、null、未定义或空字符串的表达式被解释为 false。其他任意值的表达式解释为 true。 也就是说,这里会隐式的转换为布尔值

 

上一篇:CGB2107-Day11-完成用户模块实现-MybatisPlus


下一篇:2021-10-09