第一步: 路由拦截
首先在定义路由的时候就需要多添加一个自定义字段 requireAuth, 用于判断该路由的访问是否需要登录. 如果用户已经登录, 则顺利进入路由,
否则就进入登录页面. 在路由管理页面添加 meta 字段
javascript 代码
- import vue from 'vue'
- import Router from 'vue-router'
- Vue.use(Router)
- const routes = [
- {
- path: '/',
- name: "欢迎",
- meta: {
- requireAuth: true, // 添加该字段, 表示进入这个路由是需要登录的
- },
- component: resolve => require(["../components/Hello.vue"], resolve)
- },
- {
- path: '/login',
- name: "登录",
- /*meta: {
- requireAuth: false, // 添加该字段, 表示进入这个路由是需要登录的
- },*/
- component: resolve => require(["../view/login/login.vue"], resolve)
- }
- ]
- export default new Router({
- base: "/",
- routes
- })
定义完路由后, 我们主要是利用 vue-router 提供的钩子函数 beforeEach() 对路由进行判断.. 所以在 main.js 加上
javascript 代码
- router.beforeEach((to, from, next) => {
- if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
- if (store.state.token) { // 通过 vuex state 获取当前的 token 是否存在
- next();
- }
- else {
- next({
- path: '/login',
- query: {redirect: to.fullPath} // 将跳转的路由 path 作为参数, 登录成功后跳转到该路由
- })
- }
- }
- else {
- next();
- }
- })
每个钩子方法接收三个参数:
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子. 执行效果依赖 next 方法的调用参数.
next(): 进行管道中的下一个钩子. 如果全部钩子执行完了, 则导航的状态就是 confirmed (确认的).
next(false): 中断当前的导航. 如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮), 那么 URL 地址会重置到 from 路由对应的地址.
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址. 当前的导航被中断, 然后进行一个新的导航.
确保要调用 next 方法, 否则钩子就不会被 resolved.
其中, to.meta 中是我们自定义的数据, 其中就包括我们刚刚定义的 requireAuth 字段. 通过这个字段来判断该路由是否需要登录权限. 需要的话, 同时当前应用不存在 token, 则跳转到登录页面, 进行登录. 登录成功后跳转到目标路由.
完成后, 我们可以在登录页面. 控制用户登录成功后, vuex 的 token 状态改变就可以了
html 代码
- <script>
- export default {
- methods:{
- login(){
- this.$store.commit('setToken','true'); // 改变 token 状态
- let redirect = decodeURIComponent(this.$route.query.redirect || '/'); // 获取登录成功后要跳转的路由.
- this.$router.push({
- path: redirect
- })
- }
- }
- }
- </script>
来源: http://www.qdfuns.com/article/46470/25df29ddaeb9822d42808d998cb9677e.html